我有一个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下面,它为整个页面设置了样式,而不仅仅是背景。是否有一种方法只选择图像并应用过滤器?或者,有没有一种方法可以关闭页面上所有其他元素的模糊效果?


当前回答

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); }

其他回答

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>

我没有写这个,但是我注意到使用CSS SASS编译器有一个部分支持的后台过滤器的polyfill,所以如果你有一个编译管道,它可以很好地实现(它也使用TypeScript):

https://codepen.io/mixal_bl4/pen/EwPMWo

规范引入了一个新的filter()函数,你可以像下面这样使用背景图像:

background: filter(url("whatever.jpg"), blur(5px));

<filter()>函数有两个参数。第一个参数是<image>。第二个是为CSS filter属性指定的筛选器函数列表。该函数接受参数并应用筛选规则,返回一个处理图像。

但是浏览器不支持这个:https://caniuse.com/css-filter-function。目前只能在Safari上进行测试。

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); }

不使用伪类from

身体{ 背景:# cecece; font-family: "Scope One", serif; 字体大小:12 px; 颜色:黑色; 保证金:0汽车; 高度:100%; 宽度:100%; 背景图片: 线性梯度(到底部,rgba(0,0,0,0.8), rgba(0,0,0, 0.81)), url (https://i.imgur.com/2rRMQh7.jpg); -webkit-background-size:封面; -moz-background-size:封面; -o-background-size:封面; background-size:封面; } 身体身体< > < / >