ログイン
問題18

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

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

アイコン画像

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

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!!
LINEの友達追加でお役立ち動画をGET!!

閉じる