用父 div 覆盖子 img

Question

我想用父 div 的颜色覆盖子 img。
实际孩子 img 覆盖了 div 颜色。
我给孩子的 z-index 比父母低，但这并没有改变。
我无法添加新的 html 标记并想使用 css。
有人有解决办法吗？

body {
  display: block;
  max-width: 1280px;
  width: 100%;
  background: black;
  margin: auto;
}

main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  background: grey;
}

.parent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 23%;
  height: 40%;
  margin: 1%;
  background-color: red;
  opacity: 0.5;
  position: relative;
  z-index: 2;
}

.child {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
}

<main>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
</main>

Answer 1

您不能使用z-index 将子元素移到父元素后面。但是，您可以使用 ::before 伪元素在父级内部创建一个额外的子级。将此设置为position: absolute，以便覆盖图像。在下面的示例中，我将宽度设置为 50%，这样您就可以看到发生了什么。

body {
  display: block;
  max-width: 1280px;
  width: 100%;
  background: black;
  margin: auto;
}

main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  background: grey;
}

.parent {
  width: 23%;
  height: 40%;
  margin: 1%;
  background-color: red;
  opacity: 0.5;
  position: relative;
}

.child {
  max-width: 100%;
  max-height: 100%;
}

.parent::before {
  content: '';
  display: block;
  width: 50%;
  height: 100%;
  background: red;
  position: absolute;
}

<main>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
</main>

Answer 2

尝试添加:after伪元素，如下代码所示。

body {
  display: block;
  max-width: 1280px;
  width: 100%;
  background: black;
  margin: auto;
}

main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  background: grey;
}

.parent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 23%;
  height: 40%;
  margin: 1%;
  background-color: red;
  opacity: 0.5;
  position: relative;
  z-index: 2;
}
.parent:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index:2;
}

.child {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
}

<main>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
</main>

Answer 3

我猜你正在搜索的是一种如下的叠加层。所以你需要在父母之前或之后工作。

.parent:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,0.5);
}

演示

body {
  display: block;
  max-width: 1280px;
  width: 100%;
  background: black;
  margin: auto;
}

main {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 200px;
  background: grey;
}

.parent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 23%;
  height: 40%;
  margin: 1%;
  background-color: red;
  opacity: 0.5;
  position: relative;
  /*z-index: 2;*/
}

.child {
  /*position: absolute;*/
  max-width: 100%;
  max-height: 100%;
  /*z-index: 1;*/
}
.parent:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,0,0,0.5);
}

<main>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
  <div class="parent">
    <img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
  </div>
</main>

Answer 4

我个人使用bootstrap并添加容器功能。在容器功能中，您可以添加您的功能。 （您不需要将元素添加到容器中，但我会这样做。）接下来将其添加到您想要在父 div 之上的内容中：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

前 50% 和左 50% 使您的图像居中，但这取决于您的图像等有多大。随便玩玩它就可以了。