Question

我是html的新手，目前已经设置了单色背景。我有代码将背景更改为我想要的渐变颜色，但我无法让它工作。我创建单一颜色背景的代码部分是：

</head>
<body>    
<!--Start of Product Banner-->
<body style="background-color:#6e6e6e;">
<div class="row">
<div id="header_region">
<!--Start of Header Logo-->
<div id="logo" class="two_thirds">
.....

我希望将其更改为渐变颜色和代码：

background: linear-gradient(to bottom,#6e6e6e 0%,#313131100%);

我尝试使用此代码来使其工作，但似乎可以获得正确的语法。我该如何实现这个渐变？

Answer 1

你有两个<body>标签，并且孩子有内联CSS覆盖css样式，请修复它并将css应用到正文中。

body{
/* your code */
}

Answer 2

一个简单的线性渐变，从上到下（#6e6e6e到#313131），用于身体标记：

body {
  background: -webkit-linear-gradient(#6e6e6e, #313131); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#6e6e6e, #313131); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#6e6e6e, #313131); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#6e6e6e, #313131); /* Standard syntax */
}

您可以在CSS3 here中找到有关渐变的更多信息和示例。

Answer 3

转到此链接http://www.colorzilla.com/gradient-editor/您可以像在Photoshop中一样添加颜色，它会为您创建渐变代码，并在移动到旧版浏览器时优雅地降级。

在HTML中创建渐变背景

3 个答案: