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;

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

编辑：错字

小屏幕上的背景图片模糊（在Wordpress / Chrome编辑器中看起来不错，但在实际的手机上，背景图片却模糊了

2 个答案: