CSS 小技巧：使用固定定位的图片淡出页面底部

我真的很喜欢 fortuito.us 博客上的这种微妙效果。页面底部的文字会淡出。即使您上下滚动页面内容，它看起来也会像淡入页面底部一样。

这可以通过在页面上使用固定定位的透明图片来实现，如下所示

#bottom_fade {
	z-index: 99;
	position: fixed;
	bottom: 0%;
	background-image: url("bottom-fade.png");
}

较高的 z-index 有助于确保它是最顶层的图层。

Jayzon

# 2007 年 10 月 2 日

看起来很棒！对于最后一个 -tag，我添加了一个类（可以根据您的需要命名，我将其命名为“last”），使用 margin-bottom: 150px（底部淡出高度为 200px）。使用此边距，最后一个段落完全显示并可读。可能有助于用户阅读 ;-)

Chris Coyier

# 2007 年 10 月 2 日

@Jayzon：好主意。这是一个很棒的方法。要么这样做，要么将大边距作为页面包装器的填充。

nev

# 2007 年 12 月 10 日

在 Safari 中无效

nev

# 2007 年 12 月 10 日

抱歉 - 在 Safari 3 中有效！

Jayzon

# 2007 年 12 月 11 日

几天前，当我尝试在我的主页上实现这种效果时，我遇到了一些问题。由于 png 覆盖了所有其他内容，因此无法访问 png 区域中的链接。我认为这对可用性等没有太大帮助 ;-)

无论如何，对于纯文本网站来说，这是一个不错的效果！

Chris Coyier

# 2007 年 12 月 11 日

@Jayzon：是的，因为这基本上是一个直接位于文本顶部的图片，它不会允许您“点击”并访问这些链接。也许可以妥协，将淡出缩短，使其只覆盖一行左右。

Reynier Matos Padilla

# 2007 年 12 月 15 日

真的很棒！在 Internet Explorer 中有效！

Lisa

# 2008 年 1 月 5 日

添加了 100% 的宽度并使背景重复 x，这样它就不会在更宽的页面上缩短。

不过，我想问一下：在 IE6 中，它只是停留在页面底部，而不是您所处位置的底部。有办法解决吗？

Chris Coyier

# 2008 年 1 月 7 日

@Lisa – 整个想法对 IE6 来说并不友好。您需要使用绝对定位技巧或某种 javascript 来使其保持在适当的位置，以及使用 PNG 技巧来获得 alpha 透明度。我建议只对 IE 6 及更低版本使用备用样式表，并且根本不使用此技巧。

jitendra

# 2008 年 7 月 28 日

我需要在 IE 6 中使用它，请告诉我怎么做

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