Wie ändert man die Deckkraft des Hintergrunds, ohne den Inhalt zu ändern?

Question

Ich weiß nicht, wie background-image Opazität 0,5 und den Inhalt in voller Opazität zu machen.

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

Answer 1

Ist dies die Art der Sache, nachdem Sie sind?

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

Answer 2

Für den Moment hat CSS diese Möglichkeit nicht bieten (es sei denn, Ihr Hintergrund nur eine Farbe ist, in welchem ​​Fall Sie rgba() verwenden können).

Um dies zu erreichen, können Sie Ihr .about-section in position: relative; platzieren und ein <div> Inneres schaffen (vorzugsweise als erstes Kind, oder noch besser, als ::before Pseudoelement) absolut positioniert ist, mit voller Breite und Höhe. Sie können dann die Deckkraft wie gewünscht anpassen, ohne den Inhalt zu beeinflussen.

Answer 3

Sie die ::before "-Pseudoelement verwenden können.

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

Answer 4

können Sie Pseudo-Elemente verwenden, um es zu erhalten wie folgt

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