CSSで画像にブラーをかける方法
クラス付与でぼかしを入れる方法は、
HTML.css
.blur{
-ms-filter: blur(6px);
filter: blur(6px);
}
と定義すればOK。
背景だけにブラーをかけたい場合は、beforeを用いて、
HTML.css
.blur{
background: url(imageURL) no-repeat center;
background-size: cover;
position: relative;
overflow: hidden;
}
.blur:before{
content: '';
z-index: -1;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(５px);
-ms-filter: blur(5px);
filter: blur(5px);
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
}
↧
