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

Question

我已经为此苦苦挣扎了一段时间，所以希望有人能帮助我。

我正在使用 WP Bakery 插件，我设置的页面背景图片在较小的屏幕上非常模糊。在 Wordpress/Chrome 可视化编辑器上一切看起来都很好，但在实际 phone/tablet 上照片没有调整大小，所以它只是一团模糊。 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

很多移动浏览器不支持

background-attachment: fixed;

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

编辑：打字错误

Answer 2

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

@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;
}

}

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

Background image blurry on small screens (looks fine in Wordpress/Chrome editors, but on actual phone it's blurry

css

wordpress

image

responsive-images

wpbakery