html - 将图像作为水印添加到响应式内容

Question

我有如下页面内容。当产品库存不可用时，我需要添加一张图像作为水印，说明缺货。我怎样才能做到这一点？请参见示例图像。此外，此框大小不固定。它是动态的。因为在移动设备中，盒子的尺寸更宽并且一个接一个地堆叠(不是排成一排)。所以在那种情况下我不能使用绝对位置。

<div class="col-sm-12">
     <div class="row">
        description about product
     </div>
     <div class="row">
        Select how many you want.
     </div>
     <div class="row">
         Out of Stock

     </div>
</div>

Answer 1

您可以使用伪元素添加“缺货”图像。

html:

<div class="box1 outofstock">
</div>
<div class="box2 outofstock">
</div>
<div class="box3 outofstock">
</div>
<div class="box4 outofstock">
</div>

CSS:

div.outofstock:after {
  background: transparent url(http://www.computingsystem.in/img/outofstock.png) no-repeat center;
  background-size: contain;
  content: " ";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
}

div {
  display: inline-block;
  width: 100px;
  height: 75px;
  background-color: #800;
  position: relative;
}
.box2 {
  width: 200px;
  height: 100px;
}
.box3 {
  width: 250px;
  height: 100px;
}
.box4 {
  width: 500px;
  height: 300px;
}

https://jsfiddle.net/ufktcas1/

我制作了不同尺寸的盒子，因此您可以根据尺寸查看它们的外观。

此外，您还可以选择不使用图像: https://jsfiddle.net/ufktcas1/1/

在您的情况下，应将 .outofstock 类添加到 col-sm-12 元素。但是 col-sm-12 必须有 position: relative; 才能工作。