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