CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます

サイト構築 -CSS

Post on:2024年6月24日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。

たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。

実際の動作は、デモページでご覧ください。

See the Pen
Gradient Overlay with border-image by coliss (@coliss)
on CodePen.

HTMLはシンプルです。
テキストのh1要素と背景を設定したdiv要素があるだけです。

<div class="container">
  <h1>元の状態</h1>
</div>

<div class="container overlay">
  <h1>グラデーションのオーバーレイ</h1>
</div>

</div>

<h1>グラデーションのオーバーレイ</h1>

</div>

そしてこのCSSが実装のポイントです。
グラデーションのオーバーレイは、たった1行のCSSで実装されています。

.overlay {
  border-image: fill 0 linear-gradient(#0003,#000);
}

.overlay {

border-image: fill 0 linear-gradient(#0003,#000);

}

border-imageプロパティでグラデーションを作成し、背景画像とテキストの間にオーバーレイで表示することができます。特にbackgroundプロパティを変更できない、疑似要素も使用できない、そんな時にはこのテクニックがぴったりです。

ちなみに、オーバーレイ以外のCSSは下記の通りです。

.container {
  height: 250px;
  margin: 10px max(10px,50% - 400px);
  background: url(https://picsum.photos/id/118/900/600) center/cover;
  display: grid;
  place-items:center;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.5rem;
  color: #fff;
}