div中的水印背景图像 [英] Watermark background images in div

问题描述

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

I want to create a watermark from stored images.

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

But the watermark effect the upper layers, and scaledown the color of all 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.

Im using bootstrap and Angular..

如何在div上的水印上创建背景，并将其放到背景上..但是，顶部的div(图层)受opacity:0.6和filter:alpha(opacity = 60)影响?

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) ??

推荐答案

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;   
}

演示

这篇关于div中的水印背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！