我有一个JPEG文件，我使用作为搜索页面的背景图像，我使用CSS来设置它，因为我在Backbone.js上下文中工作:
background-image: url("whatever.jpg");
我想应用css3模糊过滤器只对背景，但我不确定如何样式只是一个元素。如果我试着:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
就在我的CSS中的background-image下面，它为整个页面设置了样式，而不仅仅是背景。是否有一种方法只选择图像并应用过滤器?或者，有没有一种方法可以关闭页面上所有其他元素的模糊效果?
当前回答
现在，通过使用CSS GRID，这变得更加简单和灵活。你只需要将模糊的背景(imgbg)与文本(h2)重叠即可。
<div class="container">
<div class="imgbg"></div>
<h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
</h2>
</div>
还有css:
.container {
display: grid;
width: 30em;
}
.imgbg {
background: url(bg3.jpg) no-repeat center;
background-size: cover;
grid-column: 1/-1;
grid-row: 1/-1;
filter: blur(4px);
}
.container h2 {
text-transform: uppercase;
grid-column: 1/-1;
grid-row: 1/-1;
z-index: 2;
}
其他回答
如果你想要内容是可滚动的，设置内容的位置为绝对:
content {
position: absolute;
...
}
我不知道这是不是只适合我，但如果不是，这就是解决办法!
此外，由于背景是固定的，这意味着你有一个“视差”效果!所以现在，这个人不仅教你如何制作一个模糊的背景，而且它也是一个视差背景效果!
现在，通过使用CSS GRID，这变得更加简单和灵活。你只需要将模糊的背景(imgbg)与文本(h2)重叠即可。
<div class="container">
<div class="imgbg"></div>
<h2>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
</h2>
</div>
还有css:
.container {
display: grid;
width: 30em;
}
.imgbg {
background: url(bg3.jpg) no-repeat center;
background-size: cover;
grid-column: 1/-1;
grid-row: 1/-1;
filter: blur(4px);
}
.container h2 {
text-transform: uppercase;
grid-column: 1/-1;
grid-row: 1/-1;
z-index: 2;
}
为此，您需要重新构造HTML。为了模糊背景，你必须模糊整个元素。如果你只想模糊背景，它必须是它自己的元素。
CSS网格对我来说更容易理解。：）
html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 6fr 1fr; grid-template-rows: 1fr 6fr 1fr; grid-template-areas: '. . .' '. content .' '. . .'; justify-content: center; align-items: center; } .backbround { width: 100%; height: 100%; grid-area: 1/1/5/5; background-image: url(https://i.imgur.com/aUhpEz3.jpg); filter: blur(5px); background-position: center; background-repeat: no-repeat; background-size: cover; } .content { height: 200px; position: relative; grid-area: content; display: flex; justify-content: center; align-items: center; color: white; } <div class="container"> <div class="backbround"></div> <div class="content"><h1>Hello World</h1></div> </div>
div { background: inherit; width: 250px; height: 350px; position: absolute; overflow: hidden; /* Adding overflow hidden */ } div:before { content: ‘’; width: 300px; height: 400px; background: inherit; position: absolute; left: -25px; /* Giving minus -25px left position */ right: 0; top: -25px; /* Giving minus -25px top position */ bottom: 0; box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3); filter: blur(10px); }
