如何使用CSS響應使div元素背景圖像內的div元素

Question

我的問題是，我如何使它工作，在div style = background-image內部的元素在屏幕變小時正常工作。在我的情況下，似乎圖像框內的一個元素保持相同的高度。

#main_article_box { 
 
    width: 728px; 
 
    height: 374px; 
 
    border: 1px solid #f8f8f8; 
 
    -moz-box-shadow: 0 2px 1px #9c9c9c; 
 
    -webkit-box-shadow: 0 2px 1px #9c9c9c; 
 
    box-shadow: 0 2px 1px #9c9c9c; 
 
} 
 
#main_article_text { 
 
    margin: 280px 3px 10px 3px; 
 
    height: 90px; 
 
    background: #ffffff; 
 
    border: 1px solid #f8f8f8; 
 
    background: #ffffff; 
 
    background: -moz-linear-gradient(#ffffff, #cccccc); 
 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(1, #ffffff)); 
 
    background: -webkit-linear-gradient(#ffffff, #cccccc); 
 
    background: -o-linear-gradient(#ffffff, #cccccc); 
 
    background: -ms-linear-gradient(#ffffff, #cccccc); 
 
    background: linear-gradient(#ffffff, #cccccc); 
 
    /*-moz-border-radius: 1px; 
 
\t border-radius: 1px; 
 
\t -moz-box-shadow: 0 1px 1px #f8f8f8; 
 
\t -webkit-box-shadow: 0 1px 1px #f8f8f8; 
 
\t box-shadow: 0 1px 1px #f8f8f8;*/ 
 
    opacity: 0.8; 
 
    filter: alpha(opacity=80); 
 
} 
 
#main_article_title { 
 
    font-size: 23px; 
 
    letter-spacing: -1px; 
 
    text-transform: uppercase; 
 
    text-shadow: #333; 
 
    font-weight: bold; 
 
    margin: 8px; 
 
} 
 
#main_article_short_text { 
 
    font-size: 14px; 
 
    width: 530px; 
 
    font-weight: bold; 
 
    margin: -2px 0 0 8px; 
 
    color: #333333; 
 
} 
 
@media only screen and (max-width: 460px) { 
 
    #main_article_box { 
 
    width: 100%; 
 
    height: auto; 
 
    } 
 
    #main_article_text { 
 
    width: 98%; 
 
    height: auto; 
 
    } 
 
    #main_article_title { 
 
    font-size: 16px; 
 
    } 
 
    #main_article_short_text { 
 
    font-size: 11px; 
 
    } 
 
}

<div id="main_article_box" style="background-image: url(http://www.watchathletics.com/data/headline/9718/rio%20usain%20bolt.jpg); no-repeat center; background-size: 100% auto; "> 
 
    <div id="main_article_text"> 
 
    <div id="main_article_title"><a href="http://www.w3schools.com/html/">Main Article Title for this post</a> 
 
    </div> 
 
    <div id="main_article_short_text"> 
 
     <p>This is some intro text the article below title. This is some intro text the article below title.</p>... 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我刪除了一些款式只爲了我的理解代碼。這個解決方案是否適合你？

.wrapper { 
 
    position:relative; 
 
    width:728px; 
 
    max-width:100%; 
 
} 
 
.wrapper:after { 
 
    content: ' '; 
 
    clear: both; 
 
    display: block; 
 
} 
 

 
#main_article_box { 
 
    float:left; 
 
    width:100%; 
 
    height:auto; 
 
    border:0 none; 
 
    padding-top:51.37%; 
 
    background-size:cover; 
 
} 
 

 

 
#main_article_text { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: 0 3px 3px 3px; 
 
    height: 90px; 
 
    background: #ffffff; 
 
    border: 1px solid #f8f8f8; 
 
    background: #ffffff; 
 
    background: -moz-linear-gradient(#ffffff, #cccccc); 
 
    background: -webkit-gradient(linear,left bottom,left  top,color-stop(0, #cccccc),color-stop(1, #ffffff)); \t 
 
    background: -webkit-linear-gradient(#ffffff, #cccccc); \t 
 
    background: -o-linear-gradient(#ffffff, #cccccc); 
 
    background: -ms-linear-gradient(#ffffff, #cccccc); 
 
    background: linear-gradient(#ffffff, #cccccc); 
 
    /*-moz-border-radius: 1px; 
 
    border-radius: 1px; 
 
    -moz-box-shadow: 0 1px 1px #f8f8f8; 
 
    -webkit-box-shadow: 0 1px 1px #f8f8f8; 
 
    box-shadow: 0 1px 1px #f8f8f8;*/ 
 
    opacity:0.8; 
 
    filter:alpha(opacity=80); 
 
} 
 

 
#main_article_title { 
 
    font-size: 23px; 
 
    letter-spacing: -1px; 
 
    text-transform:uppercase; 
 
    text-shadow: #333; 
 
    font-weight: bold; 
 
    margin: 8px; 
 
} 
 

 
#main_article_short_text { 
 
    font-size: 14px; 
 
    width: auto; 
 
    font-weight:bold; 
 
    margin: -2px 0 0 8px; 
 
    color: #333333; 
 
} 
 

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

 

 
    #main_article_box { 
 

 
    width: 100%; 
 
    height: auto; 
 

 
    } 
 

 

 
    #main_article_text { 
 
    width: 98%; 
 
    height: auto; 
 

 

 
    } 
 

 
    #main_article_title { 
 
    font-size: 16px; 
 

 

 
    } 
 

 
    #main_article_short_text { 
 
    font-size: 11px; 
 

 
    } 
 

 
}

<div class="wrapper"> 
 
    <div id="main_article_box" style="background-image: url(http://www.watchathletics.com/data/headline/9718/rio%20usain%20bolt.jpg);"> 
 
    <div id="main_article_text"> 
 
     <div id="main_article_title"><a href="http://www.w3schools.com/html/">Main Article Title for this post</a></div> 
 
     <div id="main_article_short_text"><p>This is some intro text the article below title. This is some intro text the article below title. </p>...</div> 
 
    </div> 
 
    </div> 
 
</div>