如何在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);

gradient.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进行编码,您还可以使用数据网址将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);

Answer 2

应该与Mozilla相同,但使用Opera标识符:

-o-linear-gradient(top, #dcdcdc, #c6c6c6);

适用于Opera 11.10及更高版本.

Answer 3

在Dev.Opera上发表了关于如何在Opera(11.10+)上使用线性渐变的文章. http://dev.opera.com/articles/view/css3-linear-gradients/

Answer 4

使用这个:

background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));

Answer 5

CSS3 Gradients,使用最新的语法(更接近但不完全相同的Firefox,正如规范已经发展)现在正在开发Opera Presto(我们的渲染引擎).它很可能不会用于Opera 11,但可能会用于之后的版本.

Answer 6

最新的Opera版本(> = 2042)支持CSS3线性渐变.