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

467

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

css  background-image  css-filters 
— 狐狸
source
2
仅模糊图像的一部分：codepen.io/vsync/pen/gjMEWm
— VSYNC

Answers:

528

签出这支笔。

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

在示例中，我创建了两个容器，.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('https://i.imgur.com/lL6tQfy.png');
  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使用http://codepen.io/akademy/pen/FlkzB更好的实现.content:before

— 阿尼凯特
source
79
更好的方法是使用.content：before而不是额外的“背景图像”标记。我在这里更新了笔：codepen.io/akademy/pen/FlkzB
— Matthew Wilcoxson，2014年
6
首先，只有Webkit实现了此功能，而且只有供应商前缀，因此ms-，o-，moz-前缀是没有用的。
— Jon z
2
Firefox 35.0和更高版本默认情况下支持它：caniuse.com/#feat=css-filters
— Mikko Rantalainen 2014年
1
JUst已更新为FF 35，并且没有前缀即可工作
— Aamir Mahmood
1
@EdwardBlack我不认为这是一个问题，但是要永久模糊，您将不得不使用图像编辑工具。另一种方法可能是使用phantomJS / headless webkit浏览器进行某种形式的图像捕获，然后提供服务，但这是获得相同结果的乏味方法。
— Aniket '16
70

钢笔

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

实现使用

.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%。这将使背景略微放大-但边缘上不应出现纯色渗色。

请在此处更新Pen：https：//codepen.io/anon/pen/QgyewB-感谢Chad Fawcett的建议。

— Necrone
source
1
这样做的局限性在于您无法在js中操纵伪元素。如果您不需要，那么这是一个很好的解决方案。
— posit Labs
6
如果你不喜欢模糊的白色边框可以增加width和height到110%，然后添加的偏移-5%，以top和left该的content:before类。
— 乍得福塞特
1
它为我工作，但是我希望当用户滚动页面时也可以滚动背景图像。FIXED位置正在停止该操作。如何摆脱这个问题？
— DEEPAN KUMAR
61

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

  • 模糊图像的副本作为背景。
  • 可以过滤的伪元素，然后放置在内容后面。

您也可以使用 backdrop-filter

有一个称为的受支持属性backdrop-filter，Chrome 76，Edge，Safari和iOS Safari 当前受支持（请访问caniuse.com获取统计信息）。

来自Mozilla devdocs：

背景滤镜属性提供了使元素后面的区域模糊或变色等效果，然后可以通过调整元素的透明度/不透明度从该元素中看到它。

有关使用情况统计信息，请参见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默认情况下，Chromium将在76版本中启用，该版本将于2019年7月30日到期。

更新（01/06/2019）：Mozzilla Firefox团队宣布将很快开始实施此操作。

更新（21/05/2019）：刚宣布的 铬backdrop-filter在铬金丝雀中可用，而未启用“启用实验性Web平台功能”标志。这意味着backdrop-filter几乎要在所有chrome平台上实施。

— hitautodestruct
source
5
即使并非在所有浏览器中都有效，您还是会投票赞成提供符合规范的非黑客方式来执行此操作。
— MrMesees
AFAIK这是一项非标准功能，因此没有相关规范。
— Vitim.us
3
小心！在2018年，浏览器对此的支持已大大下降！Edge，Firefox或Chrome不支持。
— protoEvangelion
@protoEvangelion似乎它将在Edge 16+中可用，并且我没有看到任何其他浏览器表示它们不会实现此功能。有什么事实可以支持这些主张？
— hitautodestruct
@hitautodestruct根据caniuse.com IE，Edge 16，Firefox和Chrome目前默认不支持此功能。没错，Edge 17+支持此功能。感谢您指出了这一点。顺便说一句，虽然答案很酷，但我确实希望浏览器能够实现这一点:)
— protoEvangelion
26

为此，您需要重新构造HTML。您必须模糊整个元素才能模糊背景。因此，如果您只想模糊背景，则它必须是自己的元素。

— 假设实验室
source
6

请检查以下代码：

.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>
展开摘要

— 苏米塔瓦·达斯（Sumitava Das）
source
5

以下是带有``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 */
}
— a99
source
它对我不起作用。你有工作的jsfiddle吗？
— 马特
2

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

— 赛卡特
source
1

尽管提到的所有解决方案都非常巧妙，但是当我尝试使用所有解决方案时，它们似乎都存在较小的问题或可能与页面上的其他元素产生连锁反应。

最后，为了节省时间，我简单地回到了旧的解决方案：我使用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;
}

编辑：

我终于使它工作了，但是解决方案绝非易事！看这里：

— 夏普C
source
您下载2 imgs
— Ced
1

您实际需要的只是“过滤器”：

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>
展开摘要

— codeWithMe
source
1

当然，这不是CSS解决方案，但是您可以将CDN Proton用于filter：

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

来自https://developer.wordpress.com/docs/photon/api/#filter

— 马克斯·图斯肯
source
localhost在测试时有任何巧妙的方法可以使其正常工作吗？
— 乔纳森
较大的res图像的模糊量太微妙了，如何在不显得块状的情况下大幅增加模糊量？宽度会有所帮助，但是如果我模糊太多，它看起来会显得太块状
— Jonathan
0 

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);
}
展开摘要

— 原始金银花
source
0

该答案适用于具有动态高度和图像的Material Design水平卡片布局。

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

 

说明

  • 该卡包含在<div>with类包装器中，该类包装器是flexbox。
  • 该卡由两个元素组成，即也是链接的图像和内容。
  • 该链接<a>（类链接）位于相对位置 。
  • 链接包含两个子元素，一个占位符<div>类模糊和一个<img>类图片，它是清晰的图像。
  • 两者都定位于绝对位置并具有width: 100%，但class pic具有较高的堆栈顺序，即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>
展开摘要

— 哈莎·阿尔瓦（Harsha Alva）
source
0

现在，通过使用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;
      }
— 埃尔杰迪·乌塞马（Eljeddi Oussema）
source
0 
$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);
    }
}
— 卡洛斯·博伊佐（Carlos Boyzo）
source
1
在您的答案中添加解释会很棒。
— Arvind Maurya
惠特·萨斯（Whit Sass），我输入了下一个代码，然后将所有物品都涂在了身体上，可能需要帮助才能在身体背景上仅显示图像？ $ fondo：url（/grid/assets/img/backimage.png）; {padding：0; 边距：0; }正文{:: before {content：“”; 高度：1008px；宽度：100％; 显示：flex; 位置：绝对；背景图片：$ fondo; 背景重复：不重复；背景位置：中心；背景尺寸：封面；过滤器：blur（1.6rem）; }
— 卡洛斯·博伊佐
0

如果不使用伪类从

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}
<body></body>
展开摘要

— 代码构建者
source
-6

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

content {
   position: absolute;
   ...
}

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

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

— 用户名
source
4
没有回答这个问题
— 戈尔
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.