减少但不增加背景大小答案

【问题标题】：Reduce but not increase background size减少但不增加背景大小
【发布时间】：2013-11-01 05:57:53
【问题描述】：

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？

提前致谢！

【问题讨论】：

标签： image css background-image

【解决方案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.

【讨论】：

不错的解决方案。主类可以包含背景颜色。很整洁。
谢谢，很好的解决方案！