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

On 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版本（＆gt; = 2042）支持CSS3线性渐变。

Answer 7

Opera does not support CSS3渐变（尚未）。不过，您可以使用box-shadow以某种方式模拟它们。请参阅http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/。

Answer 8

对于Opera浏览器

background-image: -o-linear-gradient(rgb(0,189,0),rgb(0,181,255));

Answer 9

-o-linear-gradient（top，＃dcdcdc，＃c6c6c6）;

这是目前最好的选择。我尝试了SVG方法，它不仅在代码中看起来很糟糕，而且最终导致背景在firefox中消失。

感谢大家发帖。我不得不最近在Opera中实现渐变，这很痛苦。

如何在Opera中创建CSS3渐变？

9 个答案: