我有以下的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; 
    } 
}

现在我期待这个改变背景图像时，浏览器的宽度是< = 800像素

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

奇怪，为什么会出现这种情况，如何解决？这里是链接如果你需要它：

http://176.67.174.179/ukcctvinstallations.co.uk

其他唯一的CSS我有＃节，我有是： -

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

来源

2014-09-21 nsilva

还有什么控制呢？我的意思是，在你的CSS代码或元素上休息的地方，也许你直接添加的宽度吧...请包括代码，添加链接可能不帮助别人，将来参观这个问题为纽带，可以取下来或不可用...... – webeno 2014-09-21 10:11:01

我收到了404，当我访问http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-800px.jpg。没有出现改变的真正原因，不过，是因为你有一个元素指向相同的图像作为覆盖＃部分，一个区域的第一个CSS规则。 – BoltClock 2014-09-21 10:18:18

http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg - 仍然是相同的 – nsilva 2014-09-21 10:19:36

您可以在屏幕的标准尺寸创建图片像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

}

来源

2014-09-21 13:10:52

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

来源

2014-09-21 20:29:17 Deepti

切换背景图像的宽度

回答

＃部分一{

}

相关问题