html - 制作背景图片的方法

Question

我正在尝试将背景图像放入内容 div 中并仅使图像模糊，但到目前为止都失败了。当图像的代码位于内容 div 本身(下面的代码)中时，我设法让背景图像显示出来。换句话说，无需为图像制作额外的 div。但是在这种情况下，如果我放置 filter: blur(...); ，整个内容显然会变得模糊；

第二种方法是制作一个背景图像 div。但我设法要么将内容推到图像的正下方，要么将图像放在内容后面的某处，这样它就看不见了。

您建议如何制作背景图片并解决我的问题？我的代码笔 - http://codepen.io/anon/pen/hGBjA

CSS

h2 {
font-family: Open Sans;
color: #0099F1;
padding-left: 20px;
text-align: left;

}

#bizpartners ul {
list-style-image: url ("http://www.peopletraining.co.uk/people_training_april_2012002002.jpg");
}


.right {
position: relative;
float: left;
margin-top: 50px;
width: 100%;
min-height: 400px;
max-height: auto;   
z-index: 5;
margin-bottom: 5px;
background: rgba (255, 255, 255, 0.3);
border: 1px solid #000000;  
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
background-repeat: no-repeat;
}

.right p {
margin-left: 30px;
margin-top: 20px;
text-align: center;
}

Answer 1

我做的真快，希望没问题!

fiddle :http://jsfiddle.net/81yawoxg/

HTML

<div class="container">
<div class="background"></div>
<div class="text">CONTENT HERE</div>

CSS

.container{
position: relative;
width: 1280px;
height: 700px;
}

.background{
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
z-index: 100;
background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/Nature-Wallpapers-2014-2.jpg");
filter: blur(5px);
-webkit-filter: blur(5px);
background-repeat: no-repeat;
}

.text{
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
z-index: 200;
padding: 20px;
}