Question

我有如下页面内容。当产品库存不可用时，我需要添加一个图像作为水印说缺货。我怎样才能做到这一点？见样本图片。此盒子尺寸也不固定。它充满活力。因为在移动设备中，盒子的尺寸更宽，并且逐个堆叠（不是连续）。所以在这种情况下，我不能将位置用作绝对位置。 this golang blog

<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

您可以使用伪元素添加＆＃34;缺货＆＃34;图像。

<强> 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;才能生效。

Answer 2

如果所有屏幕分辨率的高度保持不变，您可以尝试与其他框相同的高度图像，并且要使图像居中，您可以使用text-align：center;或显示：块;保证金：0自动;

Answer 3

我使用以下设置，如DigitalDouble所说。并在<div class="col-sm-12 out-of-stock-img">

中调用这个缺货的img类

.out-of-stock-img:after{
   background: transparent url("../images/out-of-stock.png") no-repeat center;
   background-size: contain;
   content: " ";
   display: block;
   position: absolute;
   height: 78%;
   width: 93%;
   bottom: 13px;
}

将图像作为水印添加到响应内容中

3 个答案: