Question

我有一个背景颜色和透明背景图像的div。

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

body{
  background-color:white;
}

.watermark {
  display: block;
  position: relative;
}

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

jsfiddle

我想要更改图像的不透明度，但不要让背景颜色不受影响。但是当我设置不透明度时，两者都会改变。

有办法做到这一点吗？

Answer 1

使用<div id="name"></div> <div id="description"></div> <image id="image"></image>颜色值并移除rgba。对于白色叠加层，您可以使用opacity，而最后一个值（在本例中为0.5）定义透明度。

您可以查看fiddle。

Answer 2

您可以添加::before伪元素来处理背景颜色，以便::after元素的图像和不透明度发生变化，background-color可以不受影响。请注意，实际background-color元素的.watermark必须是透明的，因为z-index:-1会将伪元素推送到实际元素后面。

＆＃13;

.watermark {
  width: 300px;
  height: 100px;
  display: block;
  position: relative;
}

.watermark::before, .watermark::after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
}

.watermark::before {
  background:#C52F11;
}

.watermark::after {
 background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
  opacity: 0.2;
}

＆＃13;

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

＆＃13;

Updated fiddle

Answer 3

身体的CSS，无论你想要什么

body{
    background-color:white;
}

主要div（.watermark），背景颜色，宽度和高度选择

.watermark {
    width: 538px;
    height: 190px;
    display: block;
    position: relative;
    background: #C52F11;
}

CSS后的

水印，不透明度的图像

.watermark::after {
    content: "";
    background: url('https://www.google.co.in/images/srpr/logo11w.png') no-repeat;
    opacity: 0.4;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    width: 538px;
    height: 190px;
}

我建议使用两个div。在相对和绝对重叠的东西中有两个div总是一个好主意。此外，它还会为您的代码结构增加使用寿命，否则必须进行更改。

Answer 4

这是一招：

将图片插入网页的任何位置（无论大小）。
按style="opacity:0.7;"设置所需的不透明度（对于不透明度= 0.7）。
拍摄该图片的快照。
删除该图像并将捕捉的图像插入到任何您想要的位置。

如何在不影响背景颜色的情况下更改背景图像的不透明度？

4 个答案: