我制作了一个图像,当悬停在其上时会改变其顶部 div 的不透明度。 div 应与图像大小相同。我已经设法将 div 放在图像的顶部。但是,当我将宽度和高度设置为 100% 时,div 覆盖了图像,包括图像的边距。我想知道如何修复它,使 div 只能覆盖不包含边距的图像。请注意,我需要图像具有响应性,所以我不想尽可能地以像素为单位设置高度。
这是 fiddle : https://jsfiddle.net/gsuxlzt/77vn1uyg/
代码如下:
.margin {
margin-bottom: 10px;
}
.photo-thumbnail {
position: relative;
}
.photo-title {
width: 100%;
height: 100%;
background-color: #cbe1f4;
z-index: 10;
position: absolute;
top: 0;
left: 0;
color: #18121e;
text-align: center;
opacity: 0;
transition: opacity 0.5s linear;
}
.photo-title:hover {
opacity: .9;
}
<div class="photo-thumbnail">
<img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg" />
<a href=#>
<div class="photo-title">
<h2 style="padding: 20% 0 20% 0;">Project Title</h2>
</div>
</a>
</div>
最佳答案
你可以试试这段代码:
HTML 代码:
<div class="photo-thumbnail"><img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg"/><a href=#>
<div class="photo-title">
<h2 style="padding: 20% 0 20% 0;">Project Title</h2>
</div>
</a>
CSS 代码:-
.margin {
margin-bottom: 10px;
}
.img-thumbnail{padding:0px;}
.photo-thumbnail {
position: relative;
}
.photo-title {
width: 100%;
height: 100%;
background-color: #cbe1f4;
z-index: 10;
position: absolute;
top: 0;
left: 0;
color: #18121e;
text-align: center;
opacity: 0;
transition: opacity 0.5s linear;
}
.photo-title:hover {
opacity: .9;
}
关于css - div 仅覆盖图像的整个区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39573292/