0

我正在从 PSD 开发一个网站。在一个部分中，我看到有混合的背景颜色。我认为如果我可以使用 CSS3 渐变，这将是匹配颜色的最佳方式。但是，我不能使用 CSS3 渐变。所以，我求助于“来自图像的在线 CSS3 渐变背景生成器”。看，我想要这个背景图像的代码：

但是，从在线生成器我得到了这个：

看，两张图不一样。第一张图片从左到右有一个巨大的白色，而在第二张图片中没有。请看一下，再看第一张图：

我通过上传图片并复制粘贴它提供的 CSS 代码来使用这个在线生成器：

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

那么，我怎样才能为这个问题的第一张图片获得完美的 CSS3 和跨浏览器兼容代码呢？

PSD的实际部分是：

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

4

1 回答 1

0

我使用了 ColorZilla 的渐变编辑器和 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。

于 2015-02-06T20:50:05.357 回答