バートリーのさいとうです。
今回は
【HTML/CSS】beforeで表示する要素の背景だけを透過させる
というテーマで、実務から得られた学びを共有したいと思います。
擬似要素と呼ばれるbeforeやafterといった要素。とても便利です。
擬似要素に必須の、contentには指定された文字列やイメージが入りますが、1つわからないことがありました。
「contentに含む要素だけを、透過させないようにするにはどうすればいいんだろう。」
今回は、この疑問にさくっと答えていきます。
早速結論
beforeとかafterといった擬似要素では、contentに指定した文字列やイメージが表示されます。
例えば、こんな感じです。
See the Pen by サイトウユウキ (@yuki-lm) on CodePen.
この時に、緑のブロックを透過させたいとします。
その時に、以下のようにopacityをかけることが出来ます。
See the Pen by サイトウユウキ (@yuki-lm) on CodePen.
.sample {
width: 100px;
height: 100px;
position: relative;
background-color: #ebebeb;
}
.sample::before {
content: "beforeです";
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: #009432;
color: white;
opacity: 0.3
}ただ、緑のブロックにある文字列まで透過され、少し読みにくいですね。
そこで、緑のブロックだけを透過させようとすると、こうなります。
See the Pen by サイトウユウキ (@yuki-lm) on CodePen.
.sample {
width: 100px;
height: 100px;
position: relative;
background-color: #ebebeb;
}
.sample::before {
content: "beforeです";
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: rgba(0, 148, 50, 0.2);
color: black;
}background-colorを、#ではなく、rgbaで指定しています。
rgbaの最後の引数は、透明度を司っており、これを指定することで背景だけを透過させることができます。
これで、beforeで指定しているcontent要素だけを透過させないようにすることができました。
まとめ
今回は、【HTML/CSS】beforeで表示する要素の背景だけを透過させる方法について解説しました。
beforeとかafterは使えるといろんな表現が可能になるので、もっとズブズブの関係になりたい。
このブログは、月に15本を目標に、実務から学んだプログラミングのあれこれを発信しています。
誰かのためになれば、嬉しいです。
最後まで読んでいただき、ありがとうございました。
それでは。
