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）的影响？

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 https://jsfiddle.net/yg0xgm9t/1/