Question

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？

提前致谢！

Answer 1

这看起来像是Media Queries的工作！这些是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之外，基本上所有浏览器（包括移动设备）都支持媒体查询。如果您真的需要在这些浏览器中使用媒体查询，there are some polyfills that hack-in that ability.

减少但不增加背景大小

1 个答案: