Question

我想使用渐变色作为我的页面背景如何应用css来获得渐变背景？

Answer 1

请参阅：

alt text http://www.webdesignerwall.com/wp-content/uploads/2010/04/css-gradient-box.gif

Answer 2

CSS 3 supports gradients但所有浏览器都不支持此功能（例如IE6）。

但你可以做到这一点，我认为这与之前的答案非常相似：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    body {
        padding:0px;
        margin:0px;
    }
    div#bg {
        background: url(http://www.khiba.com/PSP/FALL01/Testgrad.jpg) repeat-x;
        height:600px;
    }
</style>
</head>

<body>
<div id="bg">
</div>
</body>
</html>

Answer 3

如果您希望自己的网站与所有浏览器兼容，可以使用以下网址：

background-image: url(someurl.gif);
background-repeat: repeat-x;

someurl.gif图像应包含您想要的渐变。将它作为一个非常小的图像，你可以用repeat-x或repeat-y扩展它。无论你喜欢什么。

Answer 4

您可以在CSS中使用线性梯度函数。

将此添加到您的CSS文件：

    body {
      background: linear-gradient(0deg, COLOR1, COLOR2);
    }

用第一种颜色替换COLOR1，用第二种颜色替换COLOR2。

如何在CSS中应用渐变色？

4 个答案: