CSSで背景画像の不透明度を変更する

Question

CSSのヘッダの背景画像の不透明度を変更したいと思います。私を手伝ってくれますか。

.intro { 
 
    display: table; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 100px 0; 
 
    text-align: center; 
 
    color: #fff; 
 
    background: url(http://lorempixel.com/1910/500/nature/) no-repeat bottom center scroll; 
 
    background-color: #000; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
    -o-background-size: cover; 
 
}

<header class="intro"> 
 
    ... 
 
</header>

Answer 1

を参照してください。

または、あなたはopacityでこれを行うことができます。しかしあなたはおそらくあなたがあなたの.introの中にいくつかのコンテンツを持っているのでそれを望んでいないでしょう。

だから私は基本的にあなたが背景画像になります:after要素を追加し、あなたがabsoluteにそれを置く（あなた.introはposition:relative;が必要になります）、その後、あなたが設定

.intro { 
    position: relative; 
    z-index: 0; 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: black; 
    background-color: transparent; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 


.intro:after { 
    content : ""; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg'); 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    opacity : 0.2; 
    z-index: -1; 
} 

https://jsfiddle.net/q63nf0La/

次のソリューションを提案z-indexおよびopacity。

Answer 2

それは通常の不透明度とその背後にある要素の正確なサイズを擬似要素を挿入することによって、そこにはCSSプロパティの背景-不透明ではありませんが、あなたは偽物できます。

.intro { 
 
\t position: relative; 
 
\t z-index: 0; 
 
\t display: table; 
 
\t width: 100%; 
 
\t height: auto; 
 
\t padding: 100px 0; 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t background-color: #000; 
 
} 
 

 
.intro:after { 
 
\t content : ""; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t opacity : 0.2; 
 
\t z-index: -1; 
 
\t background: url(https://t1.ftcdn.net/jpg/00/81/10/58/240_F_81105881_pmBwtzXqFmtFx6rfhujAqTnhpWZf8fXn.jpg) no-repeat bottom center scroll; 
 
\t background-size: cover; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t background-size: cover; 
 
\t -o-background-size: cover; 
 
}

<header class="intro"> 
 
    ... 
 
</header>

あなたはPhotoshopやGIMPなどのプログラムで不透明度を変更することができ、リンクhere

Answer 3

代替は、あなたがこのような背景の画像ファイルは.PNG形式に変換し、写真編集プログラムを使用して、元の画像0.2不透明度を作ることになりますが、あなたはCSSを使用して主張すれば、あなたは以下の方法で使用することができます。

を

CSSは背景画像の不透明度を直接サポートしていないので、疑似クラスを使用してヘッダー上の別のレイヤーをオーバーレイし、不透明度を設定することができます。この線に沿って何かを助ける必要があります。

<header class="intro"> 
... 
</header> 

.intro { 
    position: relative; 
    background: #5C97FF; 
    overflow: hidden; 
} 
/* You could use :after - it doesn't really matter */ 
.intro:before { 
    content: ' '; 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    opacity: 0.6; 
    background-image: url('../img/bg.jpg'); 
    background-repeat: no-repeat; 
    background-position: 50% 0; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
} 

Answer 4

HTMLコード

<header class="intro"> 
<img class="IntroImg" src="../img/bg.jpg"> 
</header> 

CSSコード

.intro introIimg:hover { 
opacity: 1.0;//Set your opacity 
... 

} 

は、それはあなたを助けることを願っています。