ログイン

問題19 背景だけを透過してみよう

HTML_CSSの問題

HTML_CSS

前の問題では画像をぼかす方法について学習しました。 CSSでは、画像や背景を透過させることもできるので、TOPページなどの画像の主張を抑えたい時などに使うと便利です。こちらも覚えていきましょう!

背景だけを透過してみよう

問題

文字は透過せず、背景だけ透過してみましょう。
見本を参考にして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¥
            
答えのアイコン

解説

CSSでのカラーの指定には #ffffff などのカラーコード指定と

rgba(000,000,000,1) のrgba記法があります。
rgbaの最後の桁に0.5とすると透過50%とできます。
覚えておきましょう。
ログインして解答を見る
背景とテキストを重ねて使う場合、今回のように背景だけを透過させたいときと背景とテキストの両方を透過させたい時があります。
その場合、使用するプロパティが変わってくるのでどちらの知識も身に着けておくとよいでしょう。
また、他のプロパティと組み合わせることでより高度なデザインを生み出すことができます。
例えば、今回使用した背景を透過させるプロパティとグラデーションさせるプロパティ(gradient)を掛け合わせることで主張しすぎない美しい背景が作れます。
他にも:hoverなどの疑似クラスを使うと「マウスが乗った時だけ透過させる」などホームページでよくボタンや画像などに使われているデザインも作ることができます。
このようにCSSは1つの機能だけではなく、他の機能とミックスさせることで独自性のあるデザインを作ることもできるので、色々試してみるのも面白いですよ!
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!