如何使用CSS响应使div元素背景图像内的div元素

我的问题是，我如何使它工作，在div style = background-image内部的元素在屏幕变小时正常工作。在我的情况下，似乎图像框内的一个元素保持相同的高度。如何使用CSS响应使div元素背景图像内的div元素

#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>

来源

2016-08-18 Girts

你想要什么来实现呢？ 'main_article_box'应该如何在较小的高度或宽度上运行？ – andreas

图像正确调整大小，但叶子上方和下方的图像空间均等。另外我希望文本框在屏幕调整大小时与图像正确匹配。这里是链接http://www.watchathletics.com/，所以当你让你的屏幕变小时，你会看到它是如何发生的。 @Andreas – Girts

我删除了一些款式只为了我的理解代码。这个解决方案是否适合你？

.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>

来源

2016-08-18 20:19:22 Maju

非常好的，这就是我在寻找坦克很多@Maju。 – Girts

如何使用CSS响应使div元素背景图像内的div元素

回答

相关问题