0 
background: #344b68 url(../../data/img/template/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover; 
-moz-background-size: cover;    
-o-background-size: cover;      
background-size: cover;

再次您好 Stackoverflow，我有以下问题。

Background.jpg 是我的网站背景图片，1080p分辨率为（1920x1080）。在图像的边界上，它淡化为#344b68。

在显示器上查看720p会导致图片尺寸减小，但在以分辨率background-size: cover查看时也会增加。1440p

现在我想要做的是，当它是一个720p显示器时，它会缩小图像的尺寸background-size: cover以适合，但是当它在上面时1080p，它会保持相同的尺寸并且只是淡入静态背景颜色（#344b68）。

我怎么能做到这一点，最好没有 JS？

提前致谢！

4

1 回答 1

1

这看起来像是媒体查询的工作！这些是 CSS3 功能，可让您指定仅在满足某些条件时才激活的代码。在您的情况下，您想查询窗口宽度：

/* normal styles */
.item-with-background {
    background-size: contain;
}

/* overrides when screen is 720px wide or smaller */
@media screen and (max-width: 720px) {
    .item-with-background {
        background-size: cover;
    }
}

注意：除了 IE 6/7/8 之外，基本上所有浏览器（包括移动设备）都支持媒体查询。如果您真的需要在这些浏览器中使用媒体查询，那么有一些 polyfill 可以破解该功能。

于 2013-10-31T21:57:53.933 回答