不影响文本的背景图像不透明度

Question

我的背景图片和文字有问题。我只想将不透明度应用于背景图像，但我的文本受到了影响。

HTML

<div class="content">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
</div>

CSS

.content{
    background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
    opacity: 0.5;
}

.content .box p{
    opacity: 1;
}

Answer 1

没有背景不透明度属性但是你可以用伪元素伪造它：

.content {
  position: relative;
}

.content::after {
  content: "";
  background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Answer 2

关注这个linkHow can i change background image opacity without changing on div content?

.content {
  position: relative;
}

.content::after {
  content: "";
  background: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') left top no-repeat, url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') right bottom no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

<div class="content">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
</div>

Answer 3

您可以在之前（或）之后使用并设置不透明度

    .content {
      position: relative;
    }

    .content ::after {
    content: "";
    position: absolute;
    background:#000 \also give any color for background;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:100%;
    height:100%;  
    }

Answer 4

为了能够将父级不透明度与其子级分开，您需要为父级使用伪选择器：

.content:after {
    content: '';    
    background: url(../img/103_n.jpg) no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

不影响文本的背景图像不透明度

Background image opacity without affecting text

html

css

background-image

opacity