用 CSS 叠加图像

Question

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

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

我看到的：

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

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 使用您已经拥有的 class 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 的 link，您可以在 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>

Answer 2

1) 创建一个DIV放置你的图片，设置left和top css，设置z-index为5，设置width和height与image相同

2) 创建另一个具有相同左、上、宽和高的 DIV，但将 z-index 设置得更高。将缺货的 img 标签放入其中

Answer 3

您可以避免使用图像并使用 CSS 二维变换（甚至 IE9 也支持）

例如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 属性，因此您可以轻松更改文本或选择提供不同的页面语言

如果您需要显示图像而不是文本（内容属性也接受图像的 url），此方法也适用：参见 http://codepen.io/anon/pen/dPdNBQ

最终结果

用 CSS 叠加图像

Overlaying a Image with CSS

html

css

background

overlay

z-index

编辑