Question

在我的项目中，我为div提供了背景图像，而屏幕尺寸减小，图像宽度也必须减小。我已经做了如下操作

div的

css 是：

.home_content{
    margin: 30px auto 20px;
    height: auto;
    width:920px;
    padding:15px 0px 70px 0px;
    background: url(images/bottom_bg.png)  no-repeat bottom center #fff;
    border:10px solid #bababa;
}

现在我已经为响应性写了一个css，即

@media only screen and (max-width: 760px) {    
    .home_content{
        position: relative;
        width: 100%;
    }
}

但问题是为div提供的背景图像保持不变。请帮助我纠正这个问题。

Answer 1

对于背景，您可以尝试使用background-size：

@media only screen and (max-width: 760px) {    
    .home_content{
        position: relative;
        width: 100%;
        background-size:100px 100px; /* or %, or cover/contains/auto */
    }
}

请参阅：http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size

Answer 2

这应该适用于大多数事情，包括IE9

@media only screen and (max-width: 760px) {    
    .home_content {
        position: relative;
        width: 100%; 
        -webkit-background-size: cover; /* For WebKit */
        -o-background-size: cover;      /* Opera */
        -moz-background-size: cover;    /* Mozilla */
        background-size: cover;         /* Generic */
    }
}

Answer 3

你真的不需要媒体查询。您可以使用background-size和background-image。当然，您必须根据自己的需要进行修改。我已经width: 80%;来展示正在应用的宽度。您可以将其更改为100％或任何您需要的。

#container{
    width: 500px;
    height: 500px;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/87/Ducati_999_2005.jpg');
    background-repeat: no-repeat;
    border: 1px solid #000;

    background-size: 80%;
}

FIDDLE

使背景图像响应

3 个答案: