Question

我正在尝试创建一个带有各种图形元素的图像框。为此，我有以下HTML代码：

.image-description:after {
  content: '';
  position: absolute;
  background: #333333;
  opacity: 0.6;
}

.image-box:after {
  content: '';
  position: absolute;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(232, 193, 30, 1) 50%);
  opacity: 0.85;
}

<div class="container">
  <div class="image-box" style="background-image: ... "></div>
  <div class="image-description">
    <h3>xxx</h3>
    <p>xxx</p>
  </div>
</div>

我想要的是按以下顺序显示元素：

图像框
图片描述：之后
image-box：after
图像描述

因此，我想在图像描述前面显示在.image-box：after中创建的线性渐变。有没有办法将image-box的after放在image-description和image-description：after之间？

Answer 1

_{（注-我为可见性添加了一些其他样式，例如背景和边框。）}

我想要的是按以下顺序显示元素：


图像框

图片描述：之后

image-box：after

图像描述

不幸的是，我认为您不能在兄弟姐妹及其父母之间进行这种互动。

您可以set a pseudo-element to have a lower z-index than its parent，但是不能将伪元素设置为具有比其表亲更低的z-index。这是因为，为了使伪元素的z-index值比其父元素低，您需要在该父元素内创建一个新的堆栈上下文，并且堆栈上下文不能混合。

因此，您所希望的最好的东西是这样的：

.container {
    border: 2px solid black; padding: 5px; /* These styles are for display purposes only */
    position: relative;
}
.image-box {
    border: 1px solid red; height: 20px; color: red; font-weight: bold; /* These styles are for display purposes only */
    position: relative;
    z-index: -1;
}
.image-box::after {
    content: 'box::after';
    position: absolute;
    left: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(232, 193, 30, 1) 50%);
    opacity: 0.6;
    color: black; font-weight: normal; /* These styles are for display purposes only */
}
.image-description {
    border: 1px solid blue; top: 50px; /* These styles are for display purposes only */
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.image-description::after {
    content: 'description::after';
    position: absolute;
    background: #333333;
    opacity: 0.6;
    top: 0; 
    z-index: -1;
}

<div class="container">
  <div class="image-box">a</div>
  <div class="image-description">
    <h3>xxx</h3>
    <p>xxx</p>
  </div>
</div>

有没有一种方法可以堆叠不同父元素的伪元素？

1 个答案: