在Yahoo.com上，我真的很喜欢浅灰色的身体渐变背景。（只是灰色褪色）
但是，我找不到他们用来产生这种效果的图像。
有谁知道雅虎使用什么图像/代码来创建这种背景效果？
问问题
1345 次
5 回答
3
这是图像： 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-27T20:26:36.280 回答
0
在您的图像应用程序中，制作一个渐变，开始时稍微暗一点，然后结束
于 2010-08-27T20:12:16.573 回答
0
使用 FireBug 或 Chrome 的 Inspect Element 甚至 IE 的开发人员的东西来查看 HTML 元素上的样式。
于 2010-08-27T20:14:15.057 回答
0
很多初学者不理解的另一件好事是，您创建了一个渐变图像，例如高 100 像素，宽只有 10 像素。然后你只需使用这样的 CSS 样式：
身体 { 背景： url('backgroundImage/png') 重复-x; }
repeat-x 水平重复图像。
于 2010-08-27T20:17:47.327 回答
0
当前的雅虎背景具有以下 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-24T05:36:20.030 回答