我有一个JPEG文件,我把它作为搜索页面的背景图片,我使用CSS来设置它,因为我在Backbone.js的背景下工作。
background-image: url("whatever.jpg");
我想将CSS 3模糊过滤器**到背景上,但我不确定如何只对这一个元素进行样式设置。如果我尝试
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
就在我的CSS中的background-image
下面,它就会对整个页面进行样式化,而不仅仅是背景。有没有办法只选择图片,然后对其进行过滤?或者,有没有办法关闭页面上所有其他元素的模糊效果?
看看这个笔。
你将不得不使用两个不同的容器,一个用于背景图片,另一个用于你的内容。
在这个例子中,我已经创建了两个容器,.background-image
和.content
。
这两个容器都用position: fixed
和left: 0; right: 0;
放置。显示它们的差异来自于为元素设置的不同的z-index
值。
.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width: 1200px;
height: 800px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.content {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
margin-left: 20px;
margin-right: 20px;
}
<div class="background-image"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
<p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>
<!--结束片段-->。
对Lorem Ipsum文本表示歉意。
感谢Matthew Wilcoxson使用.content:before
提供了更好的实现 http://codepen.io/akademy/pen/FlkzB