如何生成CSS3梯度背景

Question

我在做一个PSD网站的工作。在一个章节中，我看到了一个混合的背景颜色。我认为如果我可以使用CSS3梯度，这将是一个最好的方法来匹配颜色。但是，我不能使用CSS3梯度。因此，我求助于“在线CSS3梯度背景发生器从图像”。听着，我要这张背景图像的代码：

​

但是，从在线生成器中我得到了这样的信息：

​

听着，这两张照片不一样。在第一幅图像上有一个巨大的白色，几乎从左到右，这在第二个图像中是没有的。请看一看，第一张图片：

​

我通过上传图像并复制粘贴它提供的CSS代码来使用这个在线发电机：

​

​

您也可以在这个链接测试链接上检查结果：http://abidhasan.zxq.net/test/

那么，对于这个问题的第一个图像，如何获得完美的和跨浏览器兼容的代码呢？

私营部门司的实际部分是：

​

CSS3梯度不是制作该部分背景的最佳和最短的方法吗？

Answer 1

我使用彩色Editor梯度编辑器和ColorZilla Chrome扩展来查找您发布的渐变的上、下界。然后，我使用梯度编辑器生成的CSS规则集来生成两个div元素。我将其中一个嵌套在另一个内部，并给出了内部div opacity: .5。

HTML：

<div class="gradient" style="width: 400px; height: 100px;">
    <div class="topGradient" style="width: 400px; height: 100px;  opacity: 0.5"></div>
</div>

CSS：

.topGradient {
    background: rgb(204,204,204); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(22%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.gradient {
    background: rgb(224,224,224); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(224,224,224,1) 0%, rgba(255,255,255,1) 35%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}

最终的结果是：

​

​

这是一个JSFiddle。