如何将CSS过滤器应用于背景图像

CSS

阳光西里小哥

2020-03-18

我有一个JPEG文件，正在将其用作搜索页面的背景图像，并且由于要在Backbone.js上下文中进行工作，所以我正在使用CSS进行设置：

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

background-image在我CSS的正下方，它为整个页面设置了样式，而不仅仅是背景。有没有办法只选择图像并对其应用滤镜？另外，是否有一种方法可以仅关闭页面上所有其他元素的模糊效果？

第2117篇《如何将CSS过滤器应用于背景图像》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答

Eva猴子古一 2020.03.18

现在，通过使用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;
      }

GO番长 2020.03.18

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

null 2020.03.18

如果要使内容可滚动，请将内容的位置设置为绝对：

content {
   position: absolute;
   ...
}

我不知道这是否只适合我，但是如果不是，那就解决了！

同样，由于背景是固定的，这意味着您具有“视差”效果！因此，现在，这个人不仅教您如何制作模糊的背景，而且还具有视差背景效果！

古一柳叶风吹 2020.03.18

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

启人 2020.03.18

我没有写这个，但是我注意到backdrop-filter使用CSS SASS编译器为部分支持有一个polyfill ，所以如果您有一个编译管道，可以很好地实现（它也使用TypeScript）：

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

猴子十三小胖 2020.03.18

在.contentCSS 的标签中将其更改为position:absolute。否则，渲染的页面将无法滚动。

路易Gil 2020.03.18

以下是带有``before''伪元素的纯CSS现代浏览器的简单解决方案，例如Matthew Wilcoxson的解决方案。

为了避免访问伪元素来更改JavaScript中的图像和其他属性，只需将其inherit用作值并通过父元素（在此处body）进行访问即可。

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}