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

最新推荐文章于 2025-04-22 09:14:14 发布

翻译最新推荐文章于 2025-04-22 09:14:14 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://oldbug.net/q/1M5G1/How-to-apply-a-CSS-filter-to-a-background-image

文章标签：

#css #background-image #css-filters

本文讨论如何使用CSS滤镜仅对背景图像应用模糊效果。为了实现这一目标，需要将背景图像设置为独立元素，并对这个元素应用模糊滤镜。通过创建两个容器，一个用于背景图像，另一个用于内容，可以实现此效果。示例代码和Pen链接提供了具体的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文翻译自：How to apply a CSS filter to a background image

I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts: 我有一个JPEG文件，正在将其用作搜索页面的背景图像，并且由于要在Backbone.js上下文中进行工作，所以我正在使用CSS进行设置：

background-image: url("whatever.jpg");

I want to apply a CSS 3 blur filter only to the background, but I'm not sure how to style just that one element. 我想一个CSS 3模糊滤镜仅适用于背景，但只是一个元素，我不知道如何风格。 If I try: 如果我尝试：

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

just underneath background-image in my CSS, it styles the whole page, rather than just the background. 在CSS的background-image下方，它为整个页面设置了样式，而不仅仅是背景。 Is there a way to select just the image and apply the filter to that? 有没有办法只选择图像并对其应用滤镜？ Alternatively, is there a way to just turn the blur off for every other element on the page? 另外，是否有一种方法可以仅关闭页面上所有其他元素的模糊效果？

#1楼

参考：https://stackoom.com/question/1M5G1/如何将CSS滤镜应用于背景图像

#2楼

You need to re-structure your HTML in order to do this. 为此，您需要重新构造HTML 。 You have to blur the whole element in order to blur the background. 您必须模糊整个元素才能模糊背景。 So if you want to blur only the background, it has to be its own element. 因此，如果您只想模糊背景，则它必须是自己的元素。

#3楼

Check out this pen . 签出这支笔。

You will have to use two different containers, one for the background image and the other for your content. 您将必须使用两个不同的容器，一个用于背景图像，另一个用于您的内容。

In the example, I have created two containers, .background-image and .content . 在示例中，我创建了两个容器.background-image和.content 。

Both of them are placed with position: fixed and left: 0; right: 0; 两者都放置在以下position: fixed和left: 0; right: 0; left: 0; right: 0; . 。 The difference in displaying them comes from the z-index values which have been set differently for the elements. 显示它们的区别来自为元素设置不同的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>

Apologies for the Lorem Ipsum Text. 为Lorem Ipsum文本道歉。

Update 更新资料

Thanks to Matthew Wilcoxson for a better implementation using .content:before http://codepen.io/akademy/pen/FlkzB 感谢Matthew Wilcoxson .content:before http://codepen.io/akademy/pen/FlkzB .content:before使用.content:before实现了更好的实现

#4楼

In the .content tab in CSS change it to position:absolute . 在CSS的.content标签中，将其更改为position:absolute 。 Otherwise, the page rendered won't be scrollable. 否则，渲染的页面将无法滚动。

#5楼

pen 钢笔

Abolishing the need for an extra element, along with making the content fit within the document flow rather than being fixed/absolute like other solutions. 消除了对额外元素的需求，同时使内容适合文档流，而不是像其他解决方案一样是固定/绝对的。

Achieved using 实现使用

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

Overflow auto is needed, else the background will be offset by a few pixels at the top. 需要自动溢出，否则背景将在顶部偏移几个像素。

After this you simply need 之后，您只需要

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

EDIT If you are interested in removing the white borders at the edges, use a width and height of 110% and a left and top of -5% . 编辑如果您有兴趣消除边缘的白色边框，请使用110%的宽度和高度，以及-5%顶部和左侧。 This will enlarge your backgrounds a tad - but there should be no solid colour bleeding in from the edges. 这会稍微放大背景-但边缘不应有纯色渗出。

Updated Pen here: https://codepen.io/anon/pen/QgyewB - Thanks Chad Fawcett for the suggestion. 请在此处更新Pen： https ： //codepen.io/anon/pen/QgyewB-感谢Chad Fawcett的建议。

#6楼

Please check the below code:- 请检查以下代码：

 .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>