Question

我正在尝试将背景图片放入内容div并仅使图像模糊但到目前为止失败了。当图像的代码在内容div本身（下面的代码）中时，我设法得到背景图像。换句话说，没有为图像添加额外的div。但是在这种情况下，如果我把过滤器：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;
}

如何制作背景图片

1 个答案: