【CSS】画像(サムネイル)の上のテキストを疑似要素を使って見やすくする方法 background: linear-gradient

やりたいこと
以下のsample1を見てください。画像の上に文字をのせた時、背景画像の色と文字の色が近いと 文字がよく見えません。そこで、文字を見やすくするために、疑似要素を使って、薄く影を入れ、文字を見やすくさせたいと思います。
疑似要素で影を作る方法
sample2~5までの影のつけ方を紹介します。
HTML
<div class="thumbnail thumbnail1"></div>
<div class="thumbnail thumbnail2"></div>
<div class="thumbnail thumbnail3"></div>
<div class="thumbnail thumbnail4"></div>
共通部分
.thumbnail {
max-width: 400px;
position: relative;
margin-bottom: 20px;
border: dotted 1px #666;
}
.thumbnail::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
sample2
sample2は全体に影を作っています。文字以外の画像がちょっと暗くなってしまいます。
.thumbnail1::before {
background: rgba(0, 0, 0, 0.2);
}
sample3
sample3は中央に影を作っています。
.thumbnail2::before {
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.4) 30% 70%,
rgba(0, 0, 0, 0) 100%
);
}
sample4
sample4は下半分に影を作っています。
.thumbnail3::before {
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0) 60%,
rgba(0, 0, 0, 0)
);
}
sample5
sample5は上半分に影を作っています。
.thumbnail4::before {
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0) 40%,
rgba(0, 0, 0, 0.7)
);
}
画像とテキストを追加
sample2
sample2だけ、すべてのコードを書いておきます。その他は、ページ下部のダウンロードボタンからダウンロードしてください。
<div class="wrapper">
<div class="thumbnail thumbnail1">
<div class="text-wrapper1">
<span class="title1">タイトル テキスト</span>
<span class="title2">タイトル テキスト</span>
<span class="title3">タイトル テキスト</span>
</div>
</div>
</div>
<style>
.wrapper .thumbnail {
width: 100%;
max-width: 400px;
aspect-ratio: 3 / 2;
background: url(画像のURLを入力);
position: relative;
background-size: cover;
background-position: 0%;
margin-bottom: 20px;
color: #fff;
font-size: 1.5em;
font-weight: bold;
border: dotted 1px #666;
}
.thumbnail::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.thumbnail1::before {
background: rgba(0, 0, 0, 0.2);
}
[class^="text-wrapper"] {
position: absolute;
width: 100%;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.text-wrapper1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
sample3
sample4
sample5
参考

まとめ
- 疑似要素で影を作り、テキストを見やすくする。
- background: linear-gradientで影を作る。
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには? brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで3Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き(time-function),遅延時間(delay),方向(direction)について
【CSS】animation のアニメーションの動き(time-function),遅延時間(delay),方向(direction)について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた(ホバーした)時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。