CSS与Parent的高度相同 [英] CSS same height as Parent

问题描述

所以我的图片需要悬停效果;

So I have an image that needs a hover effect;

HTML

 <div class="data">
    <img src="http://scontent-a-dfw.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10809512_341410899374744_4010362_n.jpg"/>

    <div class="overlay"></div>
 </div>

CSS

 .data {
    width: 100px; 
    margin: auto; 
    padding: 5px; 
    height: auto; 
 }
 img {
    width: 100%; 
 }
 .overlay {
    width: 100%; 
    height: ___?; 
    background-color: blue; 
 }

如您所见， .data的高度与图片相同。如何使 .overlay 的高度 .data ？

As you can see, the height of .data is the same as the image. How can I make .overlay the same height of .data?

推荐答案

由于元素是叠加（顾名思义），我建议相对定位父母然后绝对将叠加相对定位到它：

Since the element is an overlay (as the name implies), i'd suggest relatively positioning the parent and then absolutely positioning the overlay relative to it:

示例

.data {
    width: 95%;
    margin: auto;
    position: relative;
}
.data .overlay {
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
}
.data:hover .overlay {
    background: rgba(0, 0, 0, .5);
}

这篇关于CSS与Parent的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！