ワイズリマインダー

CSSで背景画像をぼかして表示する

DEMO

画像のブラー(8px)をかける
背景色は#000000で浸透度は50%

肝はブラーをかけると4辺のフチがぼやけるので
positionで8px分拡大している

html

<section>Sheeba</section>

css

section{
	overflow:hidden;
	background-color:#000000;
	position:relative;
	z-index:0;
}
section::before{
	content:"";
	background-image:url(photo.jpg);
	position:absolute;
	z-index:-1;
	top:-8px;
	left:-8px;
	right:-8px;
	bottom:-8px;
	filter:blur(8px);
	opacity:0.5;
}

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください