0

我有一张用 CSS 遮罩的图像。我想要这个蒙版图像上方的文字。似乎 z-index 被忽略了。

我用我的代码做了一个小例子来说明问题。要查看 z 顺序取决于遮罩，您可以悬停橙色元素以取消设置遮罩。

:root{
  --text-padding: 10px;
  --octagon: url("http://i.imgur.com/9Xo9L4Z.png");
  --imageurl: url('http://i.imgur.com/jMQ5vHg.png');
}

.container{
  margin-bottom: 10px;
  border: green 3px solid;
  width: 50vw;
  height: 154px;
}

.image-container{
  width: 124px;
  height: 124px;
  margin-left: 10px;
  margin-bottom: calc(-124px / 2 - 0.5em - var(--text-padding));
  border: blue 5px solid;
  z-index: 1;
}

.wrap-image{
  cursor: pointer;
  height: 100%;
  width: 100%;
  z-index: 1;
  
  mask: var(--octagon);
  -webkit-mask-box-image: var(--octagon);
}

.wrap-image:hover{
  mask: unset;
  -webkit-mask-box-image: unset;
}

.img-src{
  content: var(--imageurl);
}
.mask-src{
  content: var(--octagon);
}

.bg-image{
  background-image: var(--imageurl);
}

.redtext{
  z-index: 100;
  color: red;
  background-color: yellow;
  padding: var(--text-padding);
}
.shiftdown{
  z-index: 100;
  margin-top: 10px;
  margin-bottom: calc(-1em - 2 * var(--text-padding));
  background-color: pink;
  padding: var(--text-padding);
}

.setdimensions{
  width: 124px;
  height: 124px;
}

h2{
  margin-top: 50px;
}
<h1>
Why does the masked-image ignore the z-index?
</h1>
<p>
The orange rectangle is masked with an image of an octagon.<br/>
Hover the orange image to unset it's mask. The z-index is applied as expected (more or less...).
</p>
<p>
<ul>
  <li>What is the explanation for that behaviour?</li>
  <li>How can we have the text above the masked image?</li>
</ul>
</p>


<h2>
Using an "div"-tag with a background-image
</h2>
<div class="container">
  <div class="shiftdown">
    This is the first line and shifted down.
  </div>

  <div class="image-container">
    <div class="wrap-image bg-image"></div>
  </div>

  <div class="redtext">
    This text should be over the masked image...
  </div>
</div>

<h2>
Using an "img"-tag for the image
</h2>
<div class="container">
  <div class="shiftdown">
    This is the first line and shifted down.
  </div>

  <div class="image-container">
    <img class="wrap-image img-src"/>
  </div>

  <div class="redtext">
    This text should be over the masked image...
  </div>
</div>

<h2>
Used image and mask
</h2>
<img class="img-src setdimensions"/>
<img class="mask-src setdimensions"/>

最好的问候和非常感谢提前

球座

4

0 回答 0