如何在不改变背景内容的情况下改变背景的不透明度？

Posted 2023-03-06

【中文标题】如何在不改变背景内容的情况下改变背景的不透明度？

【英文标题】：How to change the opacity of background without changing the content of it?

【发布时间】：2017-11-08 22:18:10

【问题描述】：

我不知道如何使background-image opacity 0.5 和内容完全不透明度。

.about-section 
  height: 100%;
  padding-top: 50px;
  text-align: center;
  /*background: #eee;*/
  background: url(../images/about.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.3;

<section id="about" class="about-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>

      </div>
    </div>
  </div>
</section>

【问题讨论】：

***.com/questions/44398224/…

你不能用 CSS，使用半透明图片

最好的解决方案是简单地将图像更改为更透明。除此之外，您可以尝试将图像保留为单独的元素。

CSS Background Opacity的可能重复

【参考方案1】：

目前，CSS 不提供这种可能性（除非您的背景只是一种颜色，在这种情况下您可以使用 rgba()）。

要实现这一点，您可以将您的.about-section 放在position: relative; 中并在其中创建一个<div>（最好作为第一个子元素，或者甚至更好，作为::before 伪元素）绝对定位，全宽和全高。然后，您可以根据需要调整其不透明度，而不会影响内容。

【参考方案2】：

这是你所追求的吗？

  .about-section 
    height: 100%;
    padding-top: 50px;
    text-align: center;
  
  
  .background 
    height: 100%;
    width: 100%;
    position: absolute;
    background: url(https://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.3;
    
  

<section id="about" class="about-section">
  <div class="background">
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>
      </div>
    </div>
  </div>
</section>

【讨论】：

不用担心@Y.EzzEldin

【参考方案3】：

您可以使用::before´-伪元素。

.about-section 
  position:relative; /* Notice this */
  height: 100%;
  padding-top: 50px;
  text-align: center;


.about-section::before 
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  left:0px;
  top:0px;
  background: #000; /* change to whatever you want */
  opacity:0.3;

<section id="about" class="about-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>
      </div>
    </div>
  </div>
</section>

【参考方案4】：

你可以使用伪元素来获取它 就像关注

.about-section 
  height: 100%;
  padding-top: 50px;
  text-align: center;
  /*background: #eee;*/
  background: url(http://lorempixel.com/400/200/);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;


.about-section::after 
  content: '';
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5); /*Change as your need */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

<section id="about" class="about-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>

      </div>
    </div>
  </div>
</section>