logo标签列表

你如何在Opera中创建CSS3渐变？

cssoperagradient
13

我可以在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 */
        /* ??? */
}
9个回答
13

Opera 10.x支持使用SVG作为背景图像，而SVG可以让你使用与Firefox和Safari的CSS扩展类似的方式进行渐变。

在10.0及以下版本中，当元素同时具有边框时，Opera的SVG背景支持似乎存在一些严重的错误，但截至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>

如果url编码SVG图像，也可以直接将其包含在CSS文件中，使用数据url。 （例如，在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);
10

应该与Mozilla的相同，但标识为Opera：

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

适用于Opera 11.10及更高版本。

9
7
使用这个：
```background-image: -o-linear-gradient(90deg,rgb(18,79,126),rgb(59,137,197));```
它是一个CSS样式代码，用于创建一个渐变背景。
1
请注意，在Opera 12.1及以上版本中不再需要-o-前缀。 - David Storey
5

最新的Opera版本（>=2042）支持CSS3线性渐变。

5

CSS3渐变，使用最新的语法（与Firefox更接近但不完全相同，因为规范已经发展）现在正在Opera Presto（我们的渲染引擎）中开发。它可能不会在Opera 11中推出，但很可能会在下一个版本中推出。

4
有人有这方面的例子吗？ - etoxin
@etoxin：在答案中链接的文章中有很多示例。 - Paul D. Waite
2

对于Opera浏览器

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

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

这绝对是最好的选择。我尝试过SVG方法，不仅在代码中看起来很糟糕，而且还会导致背景在Firefox中消失。

感谢大家的帖子。我最近也不得不在Opera中实现渐变，真是一件麻烦事。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接