問題
19背景だけを透過してみよう
前の問題では画像をぼかす方法について学習しました。 CSSでは、画像や背景を透過させることもできるので、TOPページなどの画像の主張を抑えたい時などに使うと便利です。こちらも覚えていきましょう!
HTML_CSSの問題に挑戦しよう！
問題
「背景だけを透過してみよう」
文字は透過せず、背景だけ透過してみましょう。
見本を参考にしてCSSにスタイルをあてて実装してください。
あらかじめエディタに書くコード
<div class="wrap">
<p style="padding: 20px;">文字は黒色で背景は黒の透過0.5いれてみましょう!!</p>
</div>
¥HTML¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
CSSでのカラーの指定には #ffffff などのカラーコード指定と
rgba(000,000,000,1) のrgba記法があります。
rgbaの最後の桁に0.5とすると透過50%とできます。
覚えておきましょう。
補足
背景とテキストを重ねて使う場合、今回のように背景だけを透過させたいときと背景とテキストの両方を透過させたい時があります。
その場合、使用するプロパティが変わってくるのでどちらの知識も身に着けておくとよいでしょう。
また、他のプロパティと組み合わせることでより高度なデザインを生み出すことができます。
例えば、今回使用した背景を透過させるプロパティとグラデーションさせるプロパティ(gradient)を掛け合わせることで主張しすぎない美しい背景が作れます。
他にも:hoverなどの疑似クラスを使うと「マウスが乗った時だけ透過させる」などホームページでよくボタンや画像などに使われているデザインも作ることができます。
このようにCSSは1つの機能だけではなく、他の機能とミックスさせることで独自性のあるデザインを作ることもできるので、色々試してみるのも面白いですよ!
