Question

我正在尝试在图像上方放置一个不透明层，并在其上方还包含响应文本。不透明层应在图像上方，但在文本下方，并且在将鼠标悬停在图像上方时也不显示。

我的测试页在这里：https://www.gorgeous-geek.com/image-layer-test/

我试图添加一个div层，但是找不到如何实现我想要的结果的方法。

此外，我无法正确地将橙色按钮与图像的右侧正确对齐。它显示在Chrome和Safari的不同位置。

任何帮助表示赞赏！

这是代码：

.containerbox {
  position: relative;
  color: white;
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 17.5%;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
}

.bottom-right a {
  color: white;
}

<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" style="border: 1px solid #ececec;" alt="Laptop" style="width:100%;">
  <div class="top-left">Top Left</div>
  <div class="bottom-right"><a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a></div>
</div>
</div>

Answer 1

您可以利用z-index属性来控制元素的分层方式：

z-index属性指定元素的堆叠顺序。

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

注意：z-index仅适用于定位的元素（位置：绝对，位置：相对，位置：固定或位置：粘性）。

Source

下面，我使用:after的{{1}}伪元素创建了一个叠加层，并给了该叠加层.containerbox。然后，我在叠加层上的上方中显示要显示的元素z-index: 1：

z-index: 2

.containerbox {
  position: relative;
  color: white;
}

.containerbox:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: white;
  opacity: .5;
  z-index: 1;
}

.top-left {
    position: absolute;
    top: 8%;
    left: 0;
    color: #000;
    font-weight: 800;
    background-color: #a79f9f;
    padding: 6px 40px;
    z-index: 2;
}

.bottom-right {
    position: absolute;
    bottom: 5%;
    right: 17.5%;
    color: #000;
    font-weight: 800;
    background: #de9104;
    font-size: 14px;
    padding: 4px 3%;
    z-index: 2;
}

.bottom-right a {
    color: white;
}

Answer 2

您可以使用如下所示的图像滤镜。至于“更多”按钮的位置，我不知道您要寻找的结果。

.containerbox {
  position: relative;
}

.containerbox img {
  border: 1px solid #ececec;
  width: 100%;
  filter: opacity(50%);
  transition: filter .5s ease-out;
}

.containerbox:hover img {
  filter: opacity(100%);
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 17.5%;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
}

.bottom-right a {
  color: white;
}

<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" alt="Laptop">
  <div class="top-left">Top Left</div>
  <div class="bottom-right">
    <a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a>
  </div>
</div>

更新

.containerbox {
  position: relative;
}

.containerbox img {
  border: 1px solid #ececec;
  width: 100%;
}

.overlay {
  position: absolute;
  background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%);
  z-index: 1;
  height:100%;  
  top: 0;
  left: 0;
  width: 100%;
  opacity: 100;
  transition: opacity .5s ease-out;
}

.containerbox:hover .overlay {
  opacity: 0;
}

.top-left {
  position: absolute;
  top: 8%;
  left: 0;
  color: #000;
  font-weight: 800;
  background-color: #a79f9f;
  padding: 6px 40px;
  z-index: 2;
}

.bottom-right {
  position: absolute;
  bottom: 5%;
  right: 0;
  color: #000;
  font-weight: 800;
  background: #de9104;
  font-size: 14px;
  padding: 4px 3%;
  z-index: 2;
}

.bottom-right a {
  color: white;
}

<div class="containerbox">
  <img src="https://www.gorgeous-geek.com/wp-content/uploads/Laptop-on-desk-web-design.jpg" alt="Laptop">
  <div class="overlay"></div>
  <div class="top-left">Top Left</div>
  <div class="bottom-right">
    <a href="http://www.gorgeous-geek.com/thank-you-3/" rel="noopener noreferrer" target="_blank">Read more</a>
  </div>
</div>

如何为图像添加不透明的覆盖层，该覆盖层的顶部还包含文本？

2 个答案: