css - 通过 CSS 在屏幕宽度上切换背景图像

Question

我有以下 CSS:

#section-one {
    background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-pointers.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}


@media all and (max-width: 800px) {
    #section-one {
        background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg') !important;
    }
}

现在我期待这会在浏览器宽度为 <=800px 时更改背景图像

虽然实际上没有任何变化，但是如果我在浏览器宽度低于 800 像素时右键单击并查看图像，它实际上会显示 800 像素宽度的图像吗？

奇怪，为什么会这样，我该如何解决？如果您需要，这里是链接:

http://176.67.174.179/ukcctvinstallations.co.uk

我拥有的#section-one 的唯一其他 CSS 是:-

@media all and (max-width: 880px) {
    /* Section 1 */
    #section-one {
        margin-bottom: -49px !important;
    }
}

Answer 1

您可以创建标准屏幕尺寸的图片，如 section-one.jpg (1440x900) 然后将此代码用于您的 #section-one :

#section-one{

min-width:974px;
min-height:510px;
background:url(section-one.jpg) no-repeat bottom center fixed transparent;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
height:100%;
width:100%;
image-rendering:optimizeSpeed

}