Question

我想从存储的图像中创建水印。

但水印会影响上层，并缩小所有div的颜色。

<div style="background:url({{blogthreadlist.blogUri}}) no-repeat;background-position:center;opacity:0.6;filter:alpha(opacity=60);z-index: -1">
    <div class="col-md-12">Something else</div>
    <div class="col-md-12">Something more..</div>
    <div class="col-md-12">Something at the end</div>
</div>

我正在使用bootstrap和Angular ..

如何在div中创建水印，并将其放到背景中..但顶部的div（图层）是由不透明度影响的：0.6和滤镜：alpha（不透明度= 60）?? < / p>

Answer 1

HTML

<div class="watermark">
    <div class="col-md-12">Something else</div>
    <div class="col-md-12">Something more..</div>
    <div class="col-md-12">Something at the end</div>
</div>

CSS

  .watermark {
  width: 300px;
  height: 100px;
  display: block;
  position: relative;
}

.watermark::after {
  content: "";
 background:url(https://www.google.co.in/images/srpr/logo11w.png);
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Demo

Answer 2

试试这个Demo

<div class="wrapper">
<div class="watermark"></div>
    <div class="inner-container">
        <div class="col-md-12">Something else</div>
        <div class="col-md-12">Something more..</div>
        <div class="col-md-12">Something at the end</div>
    </div>
</div>

div中的水印背景图像

2 个答案: