Question

我有这个页面：

在此页面上，您将找到产品列表。我想在此列表中添加叠加效果。

代码HTML：

<a href="http://www.altradona.ro/lenjerie-sexy/rochii-sexy/rochie-7033-black.html" title="Rochie 7033 black" class="product-image">
      <img src="http://www.altradona.ro/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/1/4/1432654037.png" data-srcx2="http://www.altradona.ro/media/catalog/product/cache/1/small_image/504x504/9df78eab33525d08d6e5fb8d27136e95/1/4/1432654037.png" width="252" height="252" alt="Rochie 7033 black">
</a>

我应该将此效果添加到a标记您可以检查网站以查看更清晰的代码，这只是一个示例。

我尝试使用这个CSS代码但没有工作：

CODE CSS：

.regular a:hover{
opacity:0.4;
background:url("http://www.altradona.ro/media/wysiwyg/OVERLAY.png");
}

这段代码有什么问题？你能帮我解决这个问题吗？

提前致谢！

Answer 1

以下是叠加层工作原理的简单示例：http://codepen.io/anon/pen/GJxeVo

你必须有一个parent element，其中必须有一个绝对的子元素位置。

你可以像这样构建你的HTML：

<div class="item">
  <img src="src" alt="tree" />
  <div class="itemOverlay"></div> <!-- OVERLAY -->
</div>

由于具有itemOverlay类的项目正在定位：绝对它将位于该div中的所有其他元素之上并创建叠加效果。

随着以下css的神奇发生：）

.item{
  width:200px;
  height:200px;
  position:relative;
}
.item img{
  width:100%;
}
.itemOverlay{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:200px;
  height:200px;
  background-color:red;
}
.item:hover .itemOverlay{
  display:block;
}

如何在此处添加叠加效果？CSS

1 个答案: