CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます
Post on:2024年6月24日
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
要素があるだけです。
1 2 3 4 5 6 7 |
<div class="container"> <h1>元の状態</h1> </div> <div class="container overlay"> <h1>グラデーションのオーバーレイ</h1> </div> |
そしてこのCSSが実装のポイントです。
グラデーションのオーバーレイは、たった1行のCSSで実装されています。
1 2 3 |
.overlay { border-image: fill 0 linear-gradient(#0003,#000); } |
border-image
プロパティでグラデーションを作成し、背景画像とテキストの間にオーバーレイで表示することができます。特にbackground
プロパティを変更できない、疑似要素も使用できない、そんな時にはこのテクニックがぴったりです。
ちなみに、オーバーレイ以外のCSSは下記の通りです。
1 2 3 4 5 6 7 8 9 10 11 |
.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; } |
sponsors