画像と重なった部分だけ文字色を変更するCSS
ときどき見かけますが、重なった部分だけ文字色を変更するCSSを紹介します。作成事例は以下の通り、画像に重なった部分だけ白色に変更されます。もちろん白色以外も選択可能です。
本記事では、「元々のテキストがそのコンテナからはみ出した場合（結果として画像の上に文字が重なる場合）に非表示化し、あらかじめ隠してあった別の色のテキストを表示させる」、という手法を使っています。
この手法のメリットは、「背景色の影響を受けずに、テキストの色を完全にコントロールできる」という点にあります。ただしHTML、CSSともに、若干複雑となります。
これとは別の簡単な方法として、CSSのmix-blend-mode: difference; を使う手法もあります。確かに簡単なのですが、背景色の影響を考慮しながら文字色を設定する必要があります。こちらの記事でmin-blend-modeで文字色変更をしているので参考にしてみてください。
https://web-children.com/2022/02/11/broken-grid-layout-using...HTMLとCSS
まずはHTMLとCSSです。コピペ可能です。
デバイス幅768px以下では、テキストと画像の横並びを解除して縦並びとし、文字の重なりもなしとしています。
HTML
<div class="content_wrapper">
<div class="text">
<div class="text_container">
<span class="text-dummy dummy1"></span>
<span class="text-main">
<span class="text-main_inner">Lorem ipsum dolor sit amet,</span>
</span>
</div>
<div class="text_container">
<span class="text-dummy dummy2"></span>
<span class="text-main">
<span class="text-main_inner">consectetur adipisci elit,</span>
</span>
</div>
</div>
<div class="bg"></div>
</div>CSS
.content_wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
/* コンテンツ幅とpaddingは適宜変更 */
max-width: 1100px;
padding: 0 15px;/* paddingは0でもよい */
margin: 0 auto;
background-color: #f6d3ff;/* 背景色 */
}
.text {
width: 30%;/* 全体幅に対するテキスト領域の割合 */
display: flex;
flex-direction: column;
/* align-items: flex-end; */
}
.text_container {
position: relative;
font-size: 32px;/* テキストのフォントサイズ */
width: 100%;
height: 50px;/* テキスト1行あたりの高さ指定 */
}
.text-dummy::before {
position: absolute;
top: 0;
left: 0;
z-index: 2;
color: white;/* 重ねた部分の文字色となる */
white-space: nowrap;/* テキストの改行禁止 */
}
.text-dummy.dummy1::before {
content: "Lorem ipsum dolor sit amet,";/* 重ねる対象のテキスト入力 */
}
.text-dummy.dummy2::before {
content: "consectetur adipisci elit,";/* 重ねる対象のテキスト入力 */
}
.text-main {
position: relative;
z-index: 3;
display: block;
overflow: hidden;/* この指定ではみ出した元テキストを非表示化 */
width: 100%;
height: 100%;
}
.text-main_inner {
position: absolute;
top: 0;
left: 0;
color: #333;/* 重ならない部分のテキスト色 */
white-space: nowrap;/* テキストの改行禁止 */
}
.bg {
position: relative;
z-index: 1;
width: 70%;
height: 600px;/* 画像高さは適宜変更 */
/* background-color: #000; */
background: url(*); /* 背景画像のURL*を指定 */
background-size: cover;
background-position: center;
}
@media(max-width: 768px) {
.content_wrapper {
display: block;
}
.text,
.bg {
width: 100%;
}
.text-dummy {
display: none;
}
.text-main_inner {
white-space: normal;
}
}本記事内での表示
ワードプレスのカスタムHTMLブロックを使って、上記のHTMLとCSSを本記事内で表示させると以下の通りとなります。記事領域のコンテナ幅等を考慮して一部上記のCSSから変更しています。
- .content_wrapperのpaddingは左のみ指定（768px以下のデバイスでは上下左右にpaddingを調整しています）
- .bgの背景画像URLを指定
- .bgの背景画像高さを600pxから400pxに変更
※デバイス幅768px以下では文字重なりはありませんので、PCなど画面幅の大きいモニターで確認ください。
HTMLとCSS使用上の注意と解説
まず、変更必須のHTMLとCSSは以下の通りです。
- HTML内のテキスト（HTML6行目と12行目）。これが表示されるテキストです。
- CSS内のテキスト（CSSの33行目と36行目）。HTMLのテキストと全く同じテキストを入力してください。これが画像と重なった部分に表示されるテキストとなります。
- CSS内の背景画像のURL（CSSの60行目）を入力。画面右に表示させる画像となります。
これ以外は、CSS内のコメントを見ながら適宜変更してください。
例えばテキスト色を変更したければ以下の通り。
・画像と重ならない部分の文字色・・・CSSの51行目
・画像と重なる部分の文字色・・・CSSの29行目
HTMLのclass="text-main_inner"に記述したテキストは、画像の重なった部分では非表示化され、代わりにCSSに記述したテキストが表示されることになります。これによりテキスト色が変更されるというわけです。
まとめ
紹介したHTML、CSSはワードプレスのカスタムHTMLにコピペすれば使用可能です。CSSについてはカスタムHTMLブロック内にて<style></style>で囲んで入力すればOKです。
とはいえ、本来はカスタムHTMLブロックは極力使用せず、2カラムのブロックの左右にテキストと画像を配置し、テキストを右にずらして画像に重ねたいところです。
これについては余力があれば記事に書くつもりです。
