Question

我想用父div的颜色覆盖子img。
实际上，子img会覆盖divs颜色。
我给孩子提供了比父母低的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

我个人使用引导程序并添加了容器功能。您可以在容器函数中添加函数。（不过，您不需要将元素添加到容器中。）接下来，将其添加到您要在父div顶部拥有的内容中：

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

顶部50％和左侧50％可以使图像居中，但这取决于图像的大小等。只是玩弄它，它将起作用。

Answer 2

我猜您正在搜索的内容如下所示。因此，您需要在父母之前或之后进行工作。

.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 3

您不能使用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 4

尝试添加: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>

用父div覆盖子img

4 个答案: