Question

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

如果我禁用图像，叠加层显示如下，所以我知道它正在插入图像，但它并不在顶部。

我所看到的：

enter image description here

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

enter image description here

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;
}

任何人都可以帮助我吗？

亲切的问候

Answer 1

制作叠加层的最佳方法是使用pseudo-element使用您已有的课程outofstock。请查看此代码段作为示例：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

修改

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以避免使用图像并使用CSS 2D转换（甚至在IE9上也支持）

e.g。 http://codepen.io/anon/pen/NPydBP

标记

<ul>
  <li data-in-stock="vendido">
     <a href=""> 
       <img src="http://dummyimage.com/400x280/cccccc/fff.jpg"  />
     </a>
  </li>
</ul>

CSS

li {
  position: relative;
  overflow: hidden;
}

[data-in-stock]:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  content: attr(data-in-stock);
  display: block;

  min-width: 160px; 
  color: #fff;
  background: #222;
  padding: 6px 10px;

  text-transform: uppercase;
  font: 1em Arial;

  -webkit-transform: rotate(-42deg) translateX(-50px);
  -moz-transform: rotate(-42deg) translateX(-50px);
  transform: rotate(-42deg) translateX(-50px);
}

重叠的文本来自标记中的data-in-stock属性，因此您可以轻松更改文本或选择性地提供不同的页面语言

如果您需要显示图片而不是文字（内容属性也接受图片的网址），此方法也可以使用：请参阅http://codepen.io/anon/pen/dPdNBQ

最终结果

enter image description here

Answer 3

1）创建DIV以放置图像，设置左侧和顶部css，并将z-index设置为5，将宽度和高度设置为与图像相同

2）创建另一个具有相同左，顶部，宽度和高度的DIV，但将z-index设置得更高。将img标签与outofstock放在里面

用CSS覆盖图像

3 个答案:

修改