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

https://stackoverflow.com//questions/20039765

21-12-2019
|

题

我有一个JPEG文件，我正在使用它作为搜索页面的背景图像，我正在使用CSS来设置它，因为我在骨干。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);

就在下面 background-image 在我的CSS中，它为整个页面设置样式，而不仅仅是背景。有没有办法只选择图像并将过滤器应用于该图像？或者，有没有办法只为页面上的每个其他元素关闭模糊？

解决方案

看看这个笔.

您将不得不使用两个不同的容器，一个用于背景图像，另一个用于您的内容。

在示例中，我创建了两个容器, .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>

对 罗伦*伊苏姆 文本。

更新资料

感谢马修*威尔科克森为了更好地实现使用 .content:before http://codepen.io/akademy/pen/FlkzB

其他提示

笔

消除了对额外元素的需求，同时使内容适合文档流，而不是像其他解决方案那样固定/绝对。

使用

.content {
  overflow: auto;
  position: relative;
}

需要溢出自动，否则背景将被顶部的几个像素偏移。

在此之后，你只需要

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

编辑如果您有兴趣删除边缘的白色边框，请使用宽度和高度为 110% 还有一个左边和上面的 -5%.这将扩大你的背景一点点-但不应该有纯色出血从边缘。

更新的笔在这里: https://codepen.io/anon/pen/QgyewB -感谢Chad Fawcett的建议。

正如其他答案所述，这可以通过以下方式实现:

模糊图像的副本作为背景。
一个伪元素，可以过滤，然后定位在内容后面。

您也可以使用 `backdrop-filter`

有一个受支持的属性称为 backdrop-filter, ，而目前在Chrome76中支持, 边缘, 、Safari和iOS Safari（请参阅 caniuse.com 于统计)。

从 Mozilla开发文件:

背景滤镜属性提供了诸如模糊或改变元素后面区域的颜色等效果，然后可以通过调整元素的透明度/不透明度来通过该元素看到这些效果。

见 caniuse.com 供使用统计。

你会像这样使用它:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

<div class="background background-filter"></div>

更新(12/06/2019):铬将与 backdrop-filter 在版本76中默认启用截止日期为2019年7月30日.

更新(01/06/2019):Mozzilla火狐团队已宣布它将很快开始实施这项工作。

更新(21/05/2019):铬刚刚宣布 backdrop-filter 在chrome canary中可用，而不启用"启用实验性Web平台功能"标志。这意味着 backdrop-filter 非常接近在所有chrome平台上实现。

你需要重新组织你的 HTML格式为了做到这一点。你必须模糊整个元素才能模糊背景。所以如果你只想模糊背景，它必须是它自己的元素。

请检查以下代码:-

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}

<div class="backgroundImageCVR">
    <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>
</div>

下面是一个简单的解决方案，用于纯CSS中的现代浏览器，带有"before"伪元素，就像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 */
}

在 .content css中的选项卡将其更改为 position:absolute.否则，呈现的页面将不可滚动。

虽然提到的所有解决方案都非常聪明，但当我尝试它们时，似乎都有小问题或潜在的敲击页面上其他元素的效果。

最后为了节省时间，我只是回到了我的旧解决方案:我用过 Paint.NET 然后转到效果，高斯模糊半径为5到10像素，并将其保存为页面图像。:-)

HTML格式:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

编辑:

我终于得到了它的工作，但解决方案绝不是简单的！看这里:

过滤器:模糊(1px);在火狐、IE和opera中不起作用

所有你真正需要的是"过滤器":

blur(«WhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

当然，这不是一个CSS解决方案，但你可以使用CDN质子与 filter:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

它是从 https://developer.wordpress.com/docs/photon/api/#filter

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

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

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

这个答案是针对一个材料设计水平卡片布局与动态高度和图像.

为了防止由于卡片的动态高度而导致图像失真，您可以使用带有模糊的背景占位符图像来调整高度的变化。

解释说明

该卡包含在一个 <div> 与类 包装器,包装器, ，这是一个flexbox。
卡片由两个元素组成，一个图像也是一个链接和内容。
链接 <a>,类连结, ，被定位亲戚.
链接由两个子元素组成，一个占位符 <div> 班级模糊和一个 <img> 班级图片这是清晰的图像。
两者都定位绝对并有 width: 100%, ，但类图片具有更高的堆栈顺序，即, z-index: 2, ，将其放置在占位符上方。
模糊占位符的背景图像通过 内联样式 在HTML中。

密码

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

现在，通过使用CSS网格，这变得更加简单和灵活。您只需将模糊背景（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;
   ...
}

不知道这是否只是为了我，但如果不是，那就是修复！

也由于背景是固定的，这意味着你有一个 "视差" 效果！所以现在，这个人不仅教你如何制作模糊的背景，而且它也是一个视差背景效果！

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow

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

更新资料

您也可以使用 backdrop-filter

解释说明

密码

您也可以使用 `backdrop-filter`