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中，但在其他元素中这将有效。没有＆＃34;不透明度＆＃34; - 效果仅适用于背景图像。

Answer 2

如果您的要求即将仅向背景添加不透明度，而不包含元素。然后你可以使用伪元素:after添加背景图像。现在，您可以为其设置opacity，并且必须将z-index: -1设置为背景图片。请查看下面的代码段以供参考。

＆＃13;

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

＆＃13;

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

＆＃13;

所以在这里你只能看到背景图片中有不透明度（透明度）而不是.child（红色框）。

将不透明度添加到许多背景图像之一

2 个答案: