CSS背景画像の不透明度を変更する方法
序章
opacityは、要素の不透明度を変更できるCSSプロパティです。 デフォルトでは、すべての要素の値は1です。 この値を0に近づけると、要素はますます透明になります。
一般的な使用例は、背景の一部として画像を使用することです。 不透明度を調整すると、テキストの読みやすさを向上させたり、目的の外観を実現したりできます。 ただし、子要素に影響を与えずに、要素のbackground-imageをopacityでターゲットにする方法はありません。
この記事では、不透明度のある背景画像のこの制限を回避するための2つの方法を紹介します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- 不透明度に精通していること。
- 位置：相対および位置：絶対に精通していること。
- スタッキングコンテキストとz-indexに精通していること
- ：beforeおよび：after疑似要素に精通していること。
方法1—個別の画像要素とポジショニングを使用する
最初のアプローチは、2つの要素に依存します。 1つは、position: relativeの参照ポイントを提供する「ラップ」です。 2つ目は、position: absoluteとスタッキングコンテキストでコンテンツの背後に表示されるimg要素です。
このアプローチのマークアップの例を次に示します。
<div class="demo-wrap">
<img
class="demo-bg"
src="https://assets.digitalocean.com/labs/images/community_bg.png"
alt=""
>
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>
そして、ここに付随するスタイルがあります：
.demo-wrap {
overflow: hidden;
position: relative;
}
.demo-bg {
opacity: 0.6;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.demo-content {
position: relative;
}
このマークアップとスタイルは、画像の上にテキストを含む結果を生成します。
「こんにちは世界」
親demo-wrap<div>は、ブロックを含む絶対位置を確立します。 demo-bg <img>はposition: absoluteに設定され、わずかなopacityが割り当てられます。 demo-content <div>はposition: relativeに設定されており、マークアップの配置方法により、demo-bgよりも高いスタッキングコンテキストがあります。 z-indexを使用して、スタッキングコンテキストをより細かく制御することもできます。
このアプローチにはいくつかの制限があります。 これは、画像が任意の要素のサイズに対応できる十分な大きさであることを前提としています。 画像が途切れたり、要素の高さ全体を覆っていないようにするには、サイズ制限を適用する必要がある場合があります。 また、「背景の位置」を制御し、クリーンな「背景の繰り返し」の代替手段を使用しない場合は、追加の調整が必要になります。
方法2—CSS疑似要素を使用する
2番目のアプローチは、疑似要素に依存します。 :beforeおよび:after疑似要素は、ほとんどの要素で使用できます。 通常、content値を指定し、それを使用して最初または最後に追加のテキストを追加します。 ただし、空の文字列を指定して、疑似要素を設計に利用することもできます。
このアプローチのマークアップの例を次に示します。
<div class="demo-wrap">
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>
そして、ここに付随するスタイルがあります：
.demo-wrap {
position: relative;
}
.demo-wrap:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.6;
background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
.demo-content {
position: relative;
}
このマークアップとスタイルは、画像の上にテキストを含む結果を生成します。
「こんにちは世界」
親demo-wrap<div>は、ブロックを含む絶対位置を確立します。 疑似要素:beforeはposition: absoluteに設定され、わずかなopacityが割り当てられ、background-size: coverを使用して使用可能なすべてのスペースを占有します。
このアプローチには、background-position、background-repeat、background-sizeなどの他のbackgroundプロパティをサポートするという利点があります。 このアプローチには、 clearfixソリューションのように、別の設計効果と競合する可能性のある疑似要素の1つを使用するという欠点があります。
結論
この記事では、不透明度のある背景画像のこの制限を回避する2つの方法について学習しました。
CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。
