問題
18
HTML/CSS
画像にぼかしを入れてみよう
Webサイトでは、画像を少しだけぼかして背景に設定し、その上にテキストを乗せているデザインをよく目にします。 Photoshopで画像をぼかすことができますが、時間もかかってしまうので不便です。 CSSを使用してぼかす方法を覚えておきましょう。
HTML/CSSの問題に挑戦しよう！
問題
「画像にぼかしを入れてみよう」
CSSを使用して画像にぼかし(モザイク)を入れてみよう!
見本を参考に作成していきましょう。
あらかじめエディタに書くコード
<div class="logo" style="width: 300px;">
<img src="https://ninjacode.work/assets/img/qa/logo.jpg">
</div>
¥HTML¥
期待する画面
解答と解説（画像にぼかしを入れてみよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
イメージやテキストなどをぼかし
モザイクを付与するにはその要素に対して
filter: blur(1px); を指定します
pxは自由に設定できます。
補足
filterプロパティには、ぼかし以外にも画像の彩度や明度、コントラストなどを変更したりすることができます。
Photoshopのペイントソフトを使用したことがあれば、馴染みのある効果だと思います。以下少しだけ紹介します。
・brightness(明度)
・contrast(コントラスト)
・drop-shadow(ドロップシャドウ)
・grayscale(グレースケール)
