雅虎如何在yahoo.com上创建它的背景渐变？

在Yahoo.com，我真的很喜欢浅灰色的身体渐变背景。（只是灰色的褪色）雅虎如何在yahoo.com上创建它的背景渐变？

但是，我找不到他们使用的图像，以达到很好的效果。

有谁知道雅虎用来创建这种背景效果的图片/代码？

在您的图片应用

来源

2010-08-27 SarahC

此图片：http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png – 2010-08-27 20:12:40

@马特，我发现，但你会看到 - 这不是正文标签上使用的背景图片。 – SarahC 2010-08-27 20:17:21

@Sara：确实不是，因为他们在html元素而不是body元素上设置背景。 – 2010-08-27 20:18:50

这是图像：http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png

如果你看一下CSS，你会看到：

background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png); 
background-repeat: repeat-x;

这是什么别人都指出。然而，没有其他人已经指出的是，也有：

background-position: 0px -2335px;

其中定义的偏移，让你看到背景没有真正开始，直到一路下滑的图像。

显示的渐变是白色到灰色，然后是透明的。为了以这种方式制作渐变，您必须将页面的颜色设置为等于渐变的最后一个范围。因此，如果您查看该CSS，您还会看到：

background-color: #E8EDF0;

这样就完成了您目前在yahoo.com上看到的渐变效果。

我也确认＃E8EDF0是该背景图像上最后一个不透明颜色的正确十六进制代码。

来源

2010-08-27 20:26:36 McAden

，让那么它结束

来源

2010-08-27 20:12:16

看一看样式使用类似萤火虫或Chrome浏览器的检查元素，甚至IE的开发者的东西的HTML元素的启动非常稍暗的梯度。

来源

2010-08-27 20:14:15 DaveShaw

我做到了，CSS Viewer（Firefox）说它是下面的图像。 http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png但是，如果你看图像，背景显然不是那个图像。 – SarahC 2010-08-27 20:18:00

很多初学者不明白的一件好事是您创建了一个梯度图像，例如100px高只有10px宽。那么你只是使用这样的CSS样式：

body {background：'backgroundImage/png'）repeat-x; }

repeat-x水平重复图像。

来源

2010-08-27 20:17:47 Catfish

目前雅虎背景有以下CSS属性

body{ 
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/ 
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/ 
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/ 
background-color: #dce2e7; 
background-attachment: scroll; 
}

来源

2013-09-24 05:36:20 Tushar

雅虎如何在yahoo.com上创建它的背景渐变？

回答

相关问题