背景の不透明度を変更するにはどうすればいいですか？

Question

background-image不透明度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>

Answer 1

これはあなたの後のことですか？

.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

（あなたの背景は、あなたがrgba()を使用することができ、その場合には、単に色、でない限り）、CSSはその可能性を提供していません。

これを実現するために、あなたはあなたの.about-sectionposition: relative;に配置することができますし、その中<div>を作成する（好ましくは最初の子として、またはより良い、::before擬似要素など）の絶対位置、完全な幅と高さを持ちます。コンテンツに影響を与えることなく、不透明度を微調整することができます。

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

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