背景画像の透明度DIV

Question

私は背景画像を透明にしようとしています（透明なPNGまたはより明るい画像を作成するオプションはありませんが、画像は頻繁に変更されます）。

background: url(image.jpg) no-repeat center center/cover; 
opacity: 0.2; 

イメージは機能していますが、DIVの内部もすべて透明です。私は解決策を探しましたが、正しい解決策を実装できないようです。どのようにそれを修正する上の任意のポインタ？

Answer 1

ラッパー要素の背景div内で不透明度を使用します。

.page { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.page::before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url('http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg'); 
 
    opacity: 0.2; 
 
    z-index: -1; 
 
} 
 
.box { 
 
    display: inline; 
 
    background: red; 
 
}

<div class="page"> 
 
    My page 
 
    <div class="box">Red box</div> 
 
</div>

Answer 2

あなたはrgba()とCSS linear-gradient()を使用することができます。

div { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg"); 
 
} 
 
span { 
 
    background: black; 
 
    color: white; 
 
}

<div><span>Hello world.</span></div>

jsFiddle

説明：

• 最初の部分：linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5))は半透明の白背景色を作成します。必要に応じて、0（完全に透明）と1（完全に不透明）の間でアルファパラメータを変更できます。

• 第2部分：url("https://i.imgur.com/xnh5x47.jpg")は、実際の背景イメージを表示します。

• 一緒に：background: linear-gradient(...), url(...);は、複数の背景を作成し、それらのうちの2つは積み重ねられ、最初のものは第2のものをカバーします。

Answer 3

あなたは擬似ELEM `コンテナの

div { 
 
     width: 300px; 
 
     height: 200px; 
 
     color: green; 
 
     position: relative; 
 
    } 
 

 
    div:before{ 
 
     background: url(https://i.imgur.com/xnh5x47.jpg); 
 
     content: ""; 
 
     z-index: -1; 
 
     position: absolute; 
 
     opacity: 0.5; 
 
     top: 0; bottom: 0; left: 0; right: 0; 
 
     background-size: cover; 
 
    }

<div> LOLOLOL </div>