为众多背景图像之一添加不透明度

Question

我有这个CSS风格：

.Right-Side-BG {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(./white.svg), linear-gradient(to bottom, #598bd7, 
    #165594);
}

我需要 svg 图像具有 0.21 的不透明度，我该怎么做？

Answer 1

您可能需要另一种方法来解决它。您可以使整个元素（例如 div 包含图像）透明使用例如：

opacity: 0.5;

如果您可以确保您的其他内容不在此 div 但在其他元素中，这将有效。没有仅适用于背景图像的 "opacity" 效果。

Answer 2

如果您的要求是只为背景添加不透明度，而不是包含元素。然后你可以使用伪元素 :after 在其中添加背景图像。现在你可以给它设置 opacity 并且必须设置 z-index: -1 使它成为背景图像。检查以下代码段以供参考。

.myDiv {
  width: 100%;
  height: 100vh;
  position: relative;
}

.myDiv:after {
  content: "";
  background-image: url('https://www.bmw.com/content/dam/bmw/common/all-models/4-series/gran-coupe/2017/images-and-videos/images/BMW-4-series-gran-coupe-images-and-videos-1920x1200-10.jpg.asset.1487328157424.jpg');
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  z-index: -1;
}

.child {
  width: 100px;
  height: 100px;
  background: red;
}

<div class="myDiv">
  <div class="child"></div>
</div>

So here you could see only the background image have opacity(transparency) not .child with in it(a red box).

为众多背景图像之一添加不透明度

Add opacity to one of the many background images

css

background-image