css - 如何在 Opera 中创建 CSS3 渐变效果？

Question

我可以在 IE6/7/8/9/FF3.6+ 和 Chrome 中创建 CSS 渐变(见下文)。

我的问题是:

如何在 Opera 中创建渐变？

.gradient{
        /*Mozilla Firefox 3.6*/
        background-image: -moz-linear-gradient(top, #dcdcdc, #c6c6c6);

        /*Webkit aka Google Chrome*/
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c6c6c6),color-stop(1, #dcdcdc));

        /*Internet Explorer 6,7 and 8*/
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6');

        /*Internet Explorer 8 only*/
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#c6c6c6')";

        /* Opera */
        /* ??? */
}

Answer 1

Opera 10.x 在背景图像中支持 SVG，并且 SVG 允许您以与 Firefox 和 Safari 的 CSS 扩展相同的方式进行渐变。

Opera 的 SVG 背景支持在 10.0 及以下版本中当您的元素也有边框时似乎有一些严重的错误，但从 10.5 开始它似乎相当可靠(以我有限的经验)。

CSS

/* Opera */
background-image: url(gradient.svg);

渐变.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
    <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
            <stop offset="0%" style="stop-color: #c6c6c6;"/>
            <stop offset="100%" style="stop-color: #dcdcdc;"/>
        </linearGradient>
    </defs>

    <rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>

如果您对 SVG 进行 url 编码，您还可以使用数据 url 将 SVG 直接包含在 CSS 文件中。 (例如，在 Python 中，您可以通过删除换行符和不必要的空格，然后将文件内容传递给 urllib.quote 来做到这一点)。

它有点不可读，但它保存了一个 HTTP 请求，如果你的 CSS 文件中嵌入了多个 SVG 渐变，你应该会看到比单个文件节省一些带宽(假设你的 CSS 文件是 gzip 压缩的)。

/* Opera */
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.0%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%20%23c6c6c6%3B%22/%3E%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%20%23dcdcdc%3B%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20fill%3D%22url%28%23gradient%29%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20/%3E%3C/svg%3E);