时间戳

首页 > 解决方案 > 如何用 rgba 覆盖父元素并覆盖子图像

html - 如何用 rgba 覆盖父元素并覆盖子图像

问题描述

#parent{
  background: rgba(0,0,0,0.4)
}

img{
  margin: 0 auto;
  display: block;
  position: relative;
  width: auto;
  max-width: 100%;
}
<div id="parent">
<div>I am text</div>
<div>
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>
<div>

如您所见，尽管它的父级设置了 rgba 不透明度，但图像并没有被覆盖。但是，我希望图像具有与父级相同的叠加层。我该如何克服呢？（我需要 IE 10、11 兼容性）

标签： htmlcss

解决方案

这是你想要的吗？

img{
  margin: 0 auto;
  display: block;
  width: auto;
  max-width: 100%;
}

.image {
  position: relative;
}

.image:before {
  content: "";
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
}
<div id="parent">
    <div>I am text</div>
  <div class="image">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
  </div>
<div>

JSFiddle 示例

推荐阅读