用CSS覆盖图像

debugcn 发表于 Dev

佩德罗·弗拉赞（PedroFrazão）

我有一家带画廊的商店。如果要制作“已售出”邮票，我想覆盖缩略图。

如果我禁用图像，则叠加层将显示波纹管，因此我知道它正在插入图像，但它不在顶部。

我所看到的：

在此处输入图片说明

我怎么知道下面的叠加层（禁用缩略图）：

在此处输入图片说明

HTML：

<li class="post-66 product type-product status-publish has-post-thumbnail sold-individually shipping-taxable purchasable product-type-simple outofstock">
<center>
<a href="http://url.com">
<img width="150" height="150" src="thumbnail.jpg" class="attachment-shop_catalog wp-post-image" alt="coelho1" />
<h3>Coelho de Peluxe</h3>
</a>
</center>
</li>

CSS：

.outofstock { 
background: url("soldoverlay.png") top left no-repeat;
position: relative; 
z-index: 200;
}
.attachment-shop_catalog{
z-index: 1;
}

谁能帮帮我吗？

亲切的问候

丹尼

制作覆盖图的最佳方法是使用pseudo-element已经具有的类outofstock。请以以下代码段为例：

li {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-align:center;
  margin:10px;
}
.outofstock:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 10;
}

<ul>
  <li>
    <a href="http://url.com">
      <img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
      <h3>WITHOUT OVERLAY</h3>
    </a>
  </li>
  <li class="outofstock">
    <a href="http://url.com">
      <img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
      <h3>OVERLAY</h3>
    </a>
  </li>
</ul>

编辑

要保持的链接，href您可以在a标记内创建伪元素，如下所示：

li {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  margin: 10px;
}
a {
  position: relative;
  display:block;
}
.outofstock a:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 10;
}

<ul>
  <li>
    <a href="http://url.com">
      <img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
      <h3>WITHOUT OVERLAY</h3>
    </a>
  </li>
  <li class="outofstock">
    <a href="http://url.com">
      <img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
      <h3>OVERLAY</h3>
    </a>
  </li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。