ログイン
問題19

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

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

アイコン画像

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

文字は透過せず、背景だけ透過してみましょう。
見本を参考にして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!!
LINEの友達追加でお役立ち動画をGET!!

閉じる