misaki
写真を使う時に、雰囲気を柔らかくしたい時ってありますよね。
今回は挿入したいimgに一手間加えて、imgの縁をぼやかす方法を紹介します。
imgの親要素にdivタグを作成します。ぼかしの指定を入れるのはこの親要素の疑似要素に指定します。
<div class="box">
<img src="画像パス">
</div>.box{
position:relative;
width:40%;
display:flex;/*画像拡大時に中央配置*/
align-items:center;/*画像拡大時に中央配置*/
justify-content:center;/*画像拡大時に中央配置*/
overflow:hidden;/*画像拡大時に中央配置*/
}
.box::after{
position:absolute;
content:"";
top:0;
bottom:0;
left:0;
width:100%;
box-shadow: inset 0 0 10px 15px pink;/*自然にするには背景色#fffを指定する*/
}
.box img{
width:100%;
}See the Pen 画像の縁をぼやかす by misaki (@miikolife) on CodePen.
わかりやすいようにbox-shadowの色をpinkに指定しています。box-shadowをinsetに指定することで内側に向けて影をつけることができます。実際に使うときは、box-shadowの色を背景色にしてください。
display: flexとoverflow: hidenは画像を拡大してもコンテナに縦横中央で収まるようにしているものです。画像のサイズが固定であったりする場合など用途によっては必要ありません。
背景色にしたパターン
See the Pen 画像の縁をぼやかす by misaki (@miikolife) on CodePen.
参考になれば嬉しいです。
