背景图像在小屏幕上模糊（在Wordpress / Chrome编辑器中看起来很好，但在实际手机上它很模糊

Question

我一直在努力解决这个问题，所以希望有人能够帮助我。

我正在使用WP Bakery插件，我设置的页面背景图像在较小的屏幕上非常模糊。在Wordpress / Chrome视觉编辑器上看起来都很好看，但在实际的手机/平板电脑上，照片没有调整大小，所以这只是一个模糊的混乱。 CSS如下：

body {
    background-color: #00657f!important;
    background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

网站地址是414kiting.com

任何帮助非常感谢。

Answer 1

我找到了解决方案 - 这肯定会起作用:)，请你用媒体查询试试这个：

@media only screen and (max-width : 767px ) {

    body {
        background-attachment: initial;
    }
body:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
    background-size: cover;
    background-position: center center;
}

}

Answer 2

很多移动浏览器都不支持

background-attachment: fixed;

解决此问题的最佳方法是对平板电脑尺寸进行媒体查询，然后降低以制作背景附件：滚动或初始，然后尝试模拟效果或仅在移动设备上丢弃它。

类型：类型