画面を単純に薄くぼかしたいときは
opacityを使うことが多いと思うのですが、今回お仕事でコーディングをした時に、
- ベースになる背景画像→暗く
- その背景上の文字→白くくっきりさせたい
- その中に入ってるフォームなどのコンテンツ→明るいけどベースの背景をぼかしたい
- そのコンテンツに入ってる文字→ぼかさずくっきり見せたい
あっちを暗くするとこっちも暗くなり、こっちをぼかすとあっちもボケる、みたいな。
z-indexを単純に使っても明度がうまく行かない、、と思ってなんとか完成しました。
ベースになる背景画像→暗く
これはまず、簡単、、と言うか、単純に設定してる背景画像に擬似要素をつけます。
html
<div class="wrapper">
<div class="container">
<div class="title">
<h2>タイトル</h2>
</div>
<div class="session__contents">
<div><p>ここの文字はくっきり黒に</p></div>
</div>
</div>
</div>
(vsコードからちょっと引っ張ってきたのでインデントが寄ってしまいました)
まず、wrapperのなかにたとえば、背景画像を設定したとします。
CSS
.wrapper {
width: 100%;
height: 100vh;
background-image: url(/images/flower1.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
&::before {
background-color: rgba(0, 0, 0, 0.4);//ここで黒目の色をかぶせる
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
}
.container {
width: 100%;
padding-top: 100px;
}
ここで背景が暗くなりました、しかしこのままだとh2の文字の色まで暗くなってしまいます。
文字だけ明るくする
そこで、文字要素にposition指定をして浮かび上がらせてくっきりさせます。
title {
text-align: center;
position: relative;//h2の親要素
h2 {
width: 100%;
font-size: 20px;
color: white;
position: absolute;//positionをつけて浮かび上がらせる
}
}
そして今度は白い四角のコンテンツ自体をくっきりさせるためにfilterで明度を明るくします。
.contents {
max-width: 500px;
height: 300px;
margin: 0 auto;
background: white;
margin-top: 100px;
margin-bottom: 100px;
filter: brightness(100%);//明るくする
}
コンテンツをぼかす
コンテンツをぼかして、下の画像を薄く見せたいのでopacityをかけます。普通にかけてしまうと中身の文字まで透過してしまいます。
例えば色をwhite指定のままopacityを0.3とかにしてしまうと、、↓
background: white;
opacity: 0.3;
文字までスケスケに。↑
コンテンツ内の文字はくっきり
コンテンツにopacityをかけるのではなく、背景色の指定をrgbaカラー表記にして、4つ目に透過具合のopacityをつけます。
.contents {
max-width: 500px;
height: 300px;
margin: 0 auto;
background: rgba(255, 254, 254, 0.6);//ここをrgbaに変更して一番最後に透明度を入れる
margin-top: 100px;
margin-bottom: 100px;
filter: brightness(100%);
text-align: center;
p {
font-size: 30px;
font-weight: bold;
}
}
と、ちょっと面倒ですが、
- 背景に擬似要素をかけて暗く
- 全体に暗くなった画面で際立たせたい文字はpositionで浮かび上がらせる
- コンテンツのみぼかしたいときはopacity単体ではなくrgbaカラーで指定
とこのような手順で写真のような透過させてるけれど、読んで欲しい文字はしっかり主張することができました。
参考までにhtmlとscssのコードを記載しておきます。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="title">
<h2>タイトル</h2>
</div>
<div class="contents">
<div>
<p>ここの文字はくっきり黒に</p>
</div>
</div>
</div>
</div>
</body>
</html>
（vs コード貼り付けたのでインデントが寄ってます）またそのうち修正しま、、
scss
.wrapper {
width: 100%;
height: 100vh;
background-image: url(/images/flower1.jpg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
&::before {
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
}
.container {
width: 100%;
padding-top: 100px;
}
.title {
text-align: center;
position: relative;
h2 {
width: 100%;
font-size: 20px;
color: white;
position: absolute;
}
}
.contents {
max-width: 500px;
height: 300px;
margin: 0 auto;
background: rgba(255, 254, 254, 0.6);
margin-top: 100px;
margin-bottom: 100px;
filter: brightness(100%);
text-align: center;
p {
font-size: 30px;
font-weight: bold;
}
}
