我有一个绝对定位的图像。图像的覆盖层应始终与图像相同。
请注意,图像具有响应性。这意味着,如果用户调整窗口大小,则图像的长度和/或高度将增加。覆盖层必须做出相应的反应。
我面临的问题是,例如,如果用户增加了浏览器的宽度,则覆盖层会根据图像的高度增加,但是,图像的高度也会增加,从而不会产生干扰的图像。尽管用户只增加了浏览器的宽度,但图像的增加却在覆盖层和图像之间产生了尺寸差异。
问题的根源:https://gyazo.com/e90fd418df20a622712b73422d1022b8
我应该如何解决这个问题?
这是我的非常糟糕的方法:
基本上,我有一个同时包含img和叠加层的 div#img-wrapper 。然后,重叠和图片应该保持与 div#img-wrapper 相同的大小。
#img-wrapper {
box-sizing: border-box;
position: relative;
left: 35%;
top: 55%;
background: yellow;
width: 50%;
}
img {
border: 1px solid black;
vertical-align: middle;
width: 100%;
z-index: 55;
opacity: 0.2;
}
<div style="width: 50%; height: 500px; border: 1px solid black;">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
答案 0 :(得分:1)
<div id="img-wrapper"><img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt=""></div>
{{1}}
我认为这就是您想要的。
答案 1 :(得分:0)
您可以试试吗?我只是稍微改变了CSS。 因此,您可以将包装器的高度设置为自动。然后取下要设置为相对于包装纸的图像的绝对位置。然后将绝对叠加层的顶部和左侧位置为0,并给出100%的高度以填充父包装器元素。
#img-wrapper {
position: relative;
width: 50%;
background: yellow;
height: auto;
}
img {
border: 1px solid black;
z-index: 1;
width: 100%;
opacity: 0.5;
}
#overlay {
position: absolute;
background: red;
opacity: 0.1;
z-index: 5;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
答案 2 :(得分:0)
您可以尝试使用伪类。这里的例子
.img-wrapper {
position: relative;
width: 50%;
}
.img-wrapper:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.img-wrapper img {
width: 100%;
}
<div class="img-wrapper">
<img src="http://via.placeholder.com/400x300" alt="">
</div>