序章

opacity 要素の不透明度を変更できるCSSプロパティです。 デフォルトでは、すべての要素の値は 1. この値をより近くに変更することによって 0、要素はますます透明になります。

一般的な使用例は、背景の一部として画像を使用することです。 不透明度を調整すると、テキストの読みやすさを向上させたり、目的の外観を実現したりできます。 ただし、ターゲットにする方法はありません background-image 要素の opacity 子要素に影響を与えることなく。

この記事では、不透明度のある背景画像のこの制限を回避するための2つの方法を紹介します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

方法1—個別の画像要素とポジショニングを使用する

最初のアプローチは、2つの要素に依存します。 1つは、参照ポイントを提供する「ラップ」です。 position: relative. 2番目は img コンテンツの背後に表示される要素 position: absolute とスタッキングコンテキスト。

このアプローチのマークアップの例を次に示します。

<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> ブロックを含む絶対測位を確立します。 The demo-bg <img> に設定されています position: absolute わずかに割り当てられました opacity. The demo-content <div> に設定されています position: relative マークアップがどのように配置されているかにより、スタックコンテキストは demo-bg. 使用することも可能です z-index スタッキングコンテキストをより細かく制御します。

このアプローチにはいくつかの制限があります。 これは、画像が任意の要素のサイズに対応できる十分な大きさであることを前提としています。 画像が途切れたり、要素の高さ全体を覆っていないようにするには、サイズ制限を適用する必要がある場合があります。 また、「背景の位置」を制御し、クリーンな「背景の繰り返し」の代替手段を使用しない場合は、追加の調整が必要になります。

方法2—CSS疑似要素を使用する

2番目のアプローチは、疑似要素に依存します。 The :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 のようなプロパティ background-position, background-repeat、 と background-size. このアプローチには、 clearfixソリューションのように、別の設計効果と競合する可能性のある疑似要素の1つを使用するという欠点があります。

結論

この記事では、不透明度のある背景画像のこの制限を回避する2つの方法について学習しました。

CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。