html - 如何向图像添加不透明叠加层，图像顶部也有文本？

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>

标签： htmlcss

Answer 1

您可以使用如下所示的图像过滤器。至于阅读更多按钮的位置，我不知道您要查找的结果。

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