CSS背景渐变

在css中，有时我们需要实现如下图所示的，背景渐变的效果。这就需要使用的linear-gradient来实现这种效果

现在我们就来看一下如何解决这个问题

假设我们有一条基本的垂直线性渐变,颜色从

#fb3过渡到

#58a

代码如下：

Document

div{

background: linear-gradient(#fb3, #58a);

width: 200px;

height: 100px;

}

这样就可以实现背景颜色渐变的div。

我们可以试着把这两个色标拉近一点

修改background的值为background:linear-gradient(#fb3 20%,#58a 80%);

如果仔细分析我们可以看到，现在容器顶部的20%区域被填充为#fb3实色,而底部20%区域被填充为

#58a实色。真正的渐变只出现在容器60%的高度区域。如果我们把两个色标继续拉近(分别改为40%和60%,参见图2-22),那真正的渐变区域就变得更窄了。你是不是开始好奇,如果我们把两个色标重合在一起,会发生什么?

background:linear-gradient(#fb3 50%,#58a 50%);

此时的效果如下。