模糊背景效果 | CSS-Tricks

当使用 CSS 为页面元素设置背景图像时，您可以使用“background-position”控制其位置，但一个常被遗忘的技巧是，您可以使用“background-attachment”控制其位置行为。

利用两张图像，我们可以实现一个非常简单有趣且我称之为“模糊背景效果”的 CSS 技巧。以下是效果图：

在该图像中您看不到的是，当您将浏览器窗口左右拉伸时，白色主要内容区域保持居中，而彩色铅笔保持固定。但白色主要内容区域覆盖铅笔的任何地方，铅笔都会显得褪色和模糊，就像透过磨砂玻璃一样。

技巧

技巧在于我们使用了两个不同的背景图像。完整、清晰、明亮的彩色版本设置在 body 元素上，而褪色模糊的图像设置在主要内容 div 包裹层上。为了使它们在固定位置保持完全相同的位置，需要将 div 上的 background-attachment 属性设置为“fixed”。以下是相关的 CSS 代码：

body	 { 
  background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap { 
  background: url(images/bg-blurry.jpg) no-repeat fixed;
  width: 500px; margin: 40px auto;
}

有时最简单的技巧能带来最整洁的结果！

Roy 最初向我展示了这个技巧，并引导我访问了该网站。

Bruno Abrantes

# 2008年12月22日

哇，真是太棒的技术了！我喜欢它如此简单却能产生如此“复杂”和有趣的效果。诚然它很简单，但我自己想都想不到，一辈子也想不到！

v-render

# 2008年12月22日

哇哦.. 真是太棒了..
我很幸运在这里最先发现它！

v-render

# 2008年12月22日

哦.. 刚错过第一名！:P

Rob Glazebrook

# 2008年12月22日

我喜欢这种简单的技巧，用起来效果很好。感谢发布此文章，Chris！

Jason

# 2008年12月22日

只是想了一下，您是否也可以将 bg-blurry.jpg 做成半透明的白色 gif？这样它就可以应用于任何图像。

Schoon

评论永久链接# 2008年12月22日

半透明的白色叠加层会产生略微不同的效果。自己尝试一下看看！
Chris Coyier

评论永久链接# 2008年12月22日

这是一个想法，但是

1) 它必须是 alpha 透明的 PNG。GIF 不支持 alpha 透明度。

2) 它不会真正“模糊”，它只会“褪色”。
Jermayn

评论永久链接# 2008年12月28日

还需要为 IE 浏览器使用 png hack

xbakesx

# 2008年12月22日

我见过的第一个类似的例子是复杂螺旋。这是一种非常巧妙的方法，可以创造出如此酷炫的效果。

Evan Riley

# 2008年12月22日

哇，很棒的技术

Elemental

# 2008年12月22日

您好，

感谢您的文章，这是一个巧妙而棒的 CSS 效果：:) 非常感谢。

Bram Van der Sype

# 2008年12月22日

是我错觉还是这种技术在向下滚动时会失效？太可惜了，因为它确实很酷。

Chris Coyier

评论永久链接# 2008年12月22日

啊是的，说得对，我里面没有足够的内容来进行滚动。您可以做的是将固定位置也添加到 body 背景中，这将使它们保持在一起。
edis

评论永久链接# 2008年12月29日

没错，作者在他的网站上也做了同样的事情，body 和 page-wrap 都有固定的背景。

Danny Murphy

# 2008年12月22日

这太棒了。再次感谢 Chris 提供的精彩技巧！
圣诞快乐

Chris Morris

# 2008年12月22日

感谢这篇文章，内容很有趣。干杯！

Eric Meyer

# 2008年12月22日

看起来像是对复杂螺旋扭曲（2002年2月23日发布）的改编，它修复了两个背景以处理内容滚动。我想知道 Bomb Squad 的人是否就是从那里得到这个想法的。

Chris Coyier

评论永久链接# 2008年12月22日

很有可能，我确定。绝对不是一个新想法，在你甚至不知道“CSS”代表什么的时候，你显然就已经在使用了 =）。

erickaweb

# 2008年12月22日

很棒的圣诞礼物，谢谢！

Justin Dickinson

# 2008年12月22日

我喜欢这种效果。这在您的网站上为彩蛋和隐藏惊喜提供了很大的潜力。必须多做一些实验。

Esben Thomsen

# 2008年12月22日

这种效果在 IE6 中的表现如何？IE6 通常对固定元素不太友好，虽然我在这方面没有太多经验，即固定位置。

Bobby P

评论永久链接# 2008年12月22日

我刚刚打开了 IE 7，它运行良好（除了圆角，因为 Chris 使用了 moz-border-radius 和 webkit-border-radius 属性。感谢您的提示，Chris！
John V

评论永久链接# 2008年12月22日

IE6 在使用 position:fixed; 时存在问题，但我从未见过它在修复背景元素时出现问题 :-)
Esben Thomsen

评论永久链接# 2008年12月23日

很酷，谢谢你的回复 John :-) 这是一个相当有趣的回复
Walter Wimberly

评论永久链接# 2008年12月23日

我把它放到 IE6 中，它遇到了与复杂螺旋扭曲相同的问题。可能可以使用一些 JS 为 IE 修复它？但这样就不那么简单了……

Page Gardens

# 2008年12月22日

一个很棒的效果，但我希望我能弄清楚如何用代码实现它（而不是 CSS 方向模糊），这样就不需要单独的图像。

Logan Leger

# 2008年12月22日

您可以使用纯 CSS 做一些类似的事情

filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75;

它不会“模糊”背景，但会使它透明。它在大多数主流浏览器中也能正常工作。效果不太一样，但它允许非图像设计。您可以在此处查看一个实时示例：175amonthman.com。好的建议；谢谢！

Yustian

# 2008年12月22日

谢谢。这是一个非常有用的技巧。

Player

# 2008年12月22日

哇！感谢这个简单而棒的技巧！=)

POPOEVER

# 2008年12月22日

在 Opera 10 alpha 中似乎存在一些问题，向下滚动到底部查看一下 :P

trace

# 2008年12月22日

非常酷且及时
谢谢
/trace

Stu | Selfconclusion.co.uk

# 2008年12月23日

如此简单却如此有效，感谢这位老兄 :)

Raymond Selda

# 2008年12月23日

非常棒！谢谢

cpg

# 2008年12月23日

这个例子很蠢，因为它在IE6上无法正常工作，并且POPOEVER是对的，因为它在使用Opera或Firefox向下滚动时无法正常工作。
再试一次，哥们…

yamaniac

评论永久链接# 2008年12月23日

哥们！这个网站叫“CSS-TRICKS”…Chris在这里向我们展示了一个我们从未了解过的有趣技巧。如果你还在使用IE6浏览器？我建议你升级一下。无论如何，我们CSS Tricks的所有人在使用CSS Tricks时都完全摆脱了IE糟糕的浏览器。如果你认为这个巧妙的技巧很蠢？我建议你自己做一个，然后向我们展示。

kiran

# 2008年12月23日

很好的技巧…谢谢

来自土耳其的eren

# 2008年12月23日

我以为这有点难，但当我看到它的技巧时，我意识到这没什么难理解的 := )

louis

# 2008年12月25日

当IE6仍然是最常用的浏览器时，我看不出这种效果对任何人有什么用，除非他们想排除IE6用户。这在IE6中不起作用。

Bernhard H.

# 2008年12月25日

前段时间我做了类似的事情，但为了模拟由JS动画驱动的拖放“窗口”的模糊背景。看看这个：演示

edis

评论永久链接# 2008年12月29日

哇，看起来真的很酷，你是怎么做到的，我的意思是拖放？
Bernhard H.

评论永久链接# 2008年12月31日

您必须在mousedown时保存框和光标之间的偏移量，然后在mousemove时使用应用于鼠标位置的该偏移量计算框的位置。为了获得模糊效果，您基本上使用了此处描述的相同方法，但使用了一个称为CSS精灵的CSS技巧，该技巧由JS计算，如dotheMoves函数所示。（查看源代码）

在mouseup时，您必须取消注册移动函数，然后完成。
（您不仅可以保存位置偏移量，还可以保存边框颜色等，如果您想在移动时更改这些内容）

Wisdom Talks

# 2008年12月25日

很棒的作品。

Kazar

# 2008年12月25日

非常好！
我通过Feed关注您的网站。

Simon Sigurdhsson

# 2008年12月25日

这是一个不错的效果，但正如Eric和xbakesx所说，它很久以前就做过了。当我还是CSS新手时，看到那个复杂螺旋示例时，我对此很感兴趣。

Luiz

# 2009年1月1日

不错的效果。

但是您的演示页面在Google Chrome上无法正常工作。

另一个链接在Chrome中运行良好。

body标签中固定的背景附件应该可以解决它。

来自俄亥俄州辛辛那提的Mike

# 2009年1月5日

这看起来很棒，IE修复只是一个htc，它告诉它如何处理png文件。我将尝试一下，看看它在我的网站上如何工作。

Paul

# 2009年1月6日

不错！必须尝试一下

Dave

# 2009年1月21日

哥们…你根本得不到任何赞誉。多么糟糕的把戏！多个背景图像，另外，尝试使该演示页面非常短并滚动。到处都是漏洞。

Lucas

评论永久链接# 2009年1月21日

感谢您在发布前阅读其他评论和回复！

Webdesign

# 2009年1月27日

感谢分享整个内容。

Jiri Navratil

# 2013年9月28日

此解决方案不适用于内容长度超过屏幕实际高度的网站。当您向下滚动一点时，模糊图像相对于实际视口在顶部固定 40px 的位置。它必须根据滚动量向上移动。这可以通过javascript轻松完成。

jQuery 代码可能如下所示。在 IE 8、9、最新 Chrome 和 Firefox 中测试。

$(document).ready(function() {
        $(window).scroll(function() {
            var diff;
            if (navigator.userAgent.indexOf('MSIE 9.') != -1)
                diff = $('body').scrollTop();
            else if (navigator.userAgent.indexOf('MSIE 8.') != -1)
                diff = $('html, body').scrollTop();
            else
                diff = $(document).scrollTop();

            $('#page-wrap').css({
                'background-position': "0px -" + diff + "px"
            });
        });
    });

无论如何…这个解决方案远远超出了我见过的解决方案。干得好=)

Alan Gresley

# 2013年12月7日

Public-fx 邮件列表中有人向我指出了这个演示。目的是创建类似的效果，但只使用一张图片。这是列表消息（来自去年），并且最近在此线程和此线程中进行了讨论。

这是我尝试，只使用“element()”和CSS滤镜一个图像。可以做得更好。

cole

# 2014年4月29日

太简单了！我一开始遇到了一些小问题，因为我没有看到“background-size:cover;”应用于我的其中一张图像。在将其应用于新的模糊图像后，它就可以工作了。很棒的技巧！

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。