CSSでぼかし効果（ブラーエフェクト）をかけるには、CSS3のfilterプロパティでblurを指定します。
しかし、このblur、背景画像を敷いた要素だけでなく中身の要素にも効いてしまいます。

なかなかクセのあるプロパティですが、使いこなせればいい感じのメインビジュアルを作成できます。

そこで、スタンダードなものから一工夫したものまで、4つの作例をご紹介します。

1. 作例1　背景要素をぼかす
2. 作例2　背景画像の一部のみをぼかす
3. 作例3　背景画像の一部のみをぼかすが、要素は位置固定ではない
4. 作例4　背景画像の一部のみをぼかしつつ、位置は（ある程度）任意

作例1　背景要素をぼかす

まずは、背景要素をぼかす方法から。

HTML

<div class="blur">
	<p>背景要素をぼかすサンプル</p>
</div>

CSS

.blur {
	position: relative;
	z-index: 0;
	background: url(bg.jpg) no-repeat center;
	background-size: cover;
	overflow: hidden;/*ぼかし効果でぼけた部分を非表示*/
}
.blur:before {
	content: '';
	background: inherit;
	-webkit-filter: blur(5px);
	filter: blur(5px);
	position: absolute;
	/*ぼかし効果で画像の端がボヤけた分だけ位置を調整*/
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: -1;
}

要は、要素の擬似要素にぼかし効果を設定します。

ぼかし効果で画像の端までぼけるため、擬似要素にぼかし効果分のマイナスマージンを設定する必要があります。そして、ぼけた部分を overflow:hidden; で非表示にします。

作例2　背景画像の一部のみをぼかす

ここまでは簡単。続いて、背景画像の一部のみをぼかしたい場合。
コンテンツ幅を指定していないため、レスポンシブ対応です。

HTML

<div class="blur">
	<div class="content">
		<p>背景画像の一部のみをぼかすサンプル</p>
	</div>
</div>

CSS

.blur {
	position: relative;
	background: url(bg.jpg) no-repeat center center;
	background-size: cover;
	padding: 50px;
}
.blur:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: inherit;
	background-clip: content-box;
	width: 100%;
	height: 100%;
	padding: 50px;
	-webkit-filter: blur(5px);
	filter: blur(5px);
}
.blur .content {
	position: relative;
	background: rgba(255,255,255,0.4);
	border: 1px solid rgba(255,255,255,0.4);
	padding: 50px;
}

通常要素と擬似要素、2つの要素を重ねた状態から位置を調整しようとすると背景画像がずれてしまいます。

背景画像を一致させるために、疑似要素に background-clip:content-box; を指定し、paddingで位置調整をします。
background-clip:content-box; を指定すると、全体から要素部分のみ切り取ったような状態で表示してくれます。

作例3　背景画像の一部のみをぼかすが、要素は位置固定ではない

続いて、背景画像の一部のみをぼかしつつ、要素の位置が固定でない場合について。
例えば、横幅60%で margin:0 auto;（中央寄せ）の場合。
こちらも横幅が%指定のため、レスポンシブ対応です。

HTML

<div class="blur">
	<div class="content">
		<p>背景画像の一部のみをぼかしつつ、要素の位置が固定でないサンプル</p>
	</div>
</div>

CSS

.blur {
	position: relative;
	background: url(bg.jpg) no-repeat center center;
	background-size: cover;
	padding: 50px 0;
}
.blur:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: inherit;
	background-clip: content-box;
	width: 100%;
	height: 100%;
	padding: 50px 0;
	padding-left: calc(40% / 2);
	padding-right: calc(40% / 2);
	-webkit-filter: blur(5px);
	filter: blur(5px);
}
.blur .content {
	position: relative;
	background: rgba(255,255,255,0.4);
	border: 1px solid rgba(255,255,255,0.4);
	margin: 0 auto;
	padding: 50px;
	width: 60%;
}

margin には auto がありますが padding にはないので、calc で padding を指定します。
この場合は、左右に（100% - コンテンツ幅）の半分の値を指定します。
数式を略さずに書くと calc((100% - 60%) / 2); ですが、100% - 60% くらいは calc するまでもないので、40%としています。
また同様に、40% / 2 くらいは 20% と指定してもいいんですが、コンテンツ幅が割り切れない数の場合もありますので、calc で割っています。

スマホ時は作例1や作例2のようにすれば、スマホ対応もばっちりです。

作例4　背景画像の一部のみをぼかしつつ、位置は（ある程度）任意

作例3のように calc をうまく使えば、わりと任意の場所を一部だけぼかすことができます。
例えば、横幅70%で右余白取りつつ、左auto（margin:0 50px 0 auto;）の場合。

HTML

<div class="blur">
	<div class="content">
		<p>背景画像の一部のみをぼかし、位置は任意サンプル</p>
	</div>
</div>

CSS

.blur {
	position: relative;
	background: url(bg.jpg) no-repeat center center;
	background-size: cover;
	padding: 50px 0;
}
.blur:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: inherit;
	background-clip: content-box;
	width: 100%;
	height: 100%;
	padding: 50px 0;
	padding-left: calc(30% - 50px);
	padding-right: 50px;
	-webkit-filter: blur(5px);
	filter: blur(5px);
}
.blur .content {
	position: relative;
	background: rgba(255,255,255,0.4);
	border: 1px solid rgba(255,255,255,0.4);
	margin: 0 50px 0 auto;
	padding: 50px;
	width: 70%;
}

この場合は、まず右に余白分指定します。続いて、左に（100% - コンテンツ幅）の値から右余白を引いた値を指定します。
数式を略さずに書くと calc(100% - 70% - 50px); です。例によって、100% - 70% くらいは calc するまでもないので、30%としています。

こちらも、スマホ時は作例1や作例2のようにすれば、スマホ対応もばっちりです。

以上です。よろしければ、ご活用ください。