ログイン

問題18 画像にぼかしを入れてみよう

HTML_CSSの問題

HTML_CSS

Webサイトでは、画像を少しだけぼかして背景に設定し、その上にテキストを乗せているデザインをよく目にします。 Photoshopで画像をぼかすことができますが、時間もかかってしまうので不便です。 CSSを使用してぼかす方法を覚えておきましょう。

画像にぼかしを入れてみよう

問題

CSSを使用して画像にぼかし(モザイク)を入れてみよう!
見本を参考に作成していきましょう。

自分の環境に書くコード

              <div class="logo" style="width: 300px;">
    <img src="https://ninjacode.work/assets/img/qa/logo.jpg">
</div>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <div class="logo" style="width: 300px;">
  <img src="https://ninjacode.work/assets/img/qa/logo.jpg">
</div>
¥HTML¥
            
              .logo {
    width: 300px;
}
img {
    width: 100%;
    filter: blur(6px);
}
¥CSS¥
            
答えのアイコン

解説

イメージやテキストなどをぼかし
モザイクを付与するにはその要素に対して
filter: blur(1px); を指定します

pxは自由に設定できます。
ログインして解答を見る
filterプロパティには、ぼかし以外にも画像の彩度や明度、コントラストなどを変更したりすることができます。
Photoshopのペイントソフトを使用したことがあれば、馴染みのある効果だと思います。以下少しだけ紹介します。
・brightness(明度)
・contrast(コントラスト)
・drop-shadow(ドロップシャドウ)
・grayscale(グレースケール)
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!