＃部酮{

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;
    }
}

现在我希望在浏览器宽度为＆lt; = 800px

时更改背景图片

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

奇怪，为什么会发生这种情况，我该如何解决？如果您需要，可以使用以下链接：

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：

＃部酮{

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

}

Answer 2

Please try this code

@media only screen 
and (max-width :800px) {

 #section-one{ 

 background: url(section-one.jpg)  no-repeat center center fixed;

 -webkit-background-size: cover;

 -moz-background-size: cover;

 -o-background-size: cover;

 background-size: cover;

 width:100%;

 height:100%;
 }
 }

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

2 个答案:

＃部酮{

}