CSS div中的水印背景图像

Watermark background images in div

提问by Delete me

I want to create a watermark from stored images.

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

But the watermark effect the upper layers, and scaledown the color of all div..

但是水印影响了上层，并缩小了所有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>

Im using bootstrap and Angular..

我使用引导程序和 Angular ..

How do I create at watermark on in a div, and put it to the background.. But the divs (layers) on top is nok effected by the opacity:0.6 and filter:alpha(opacity=60) ??

我如何在 div 中的水印处创建，并将其放在背景中.. 但是顶部的 div（层）不受 opacity:0.6 和 filter:alpha(opacity=60) 的影响？

回答by Vicky

HTML

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

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

演示

回答by stanze

Try this 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>