如何在Opera中创建CSS3渐变？

我可以在IE6/7/8/9/FF3.6 +和Chrome中创建CSS渐变（请参见下文）。如何在Opera中创建CSS3渐变？

我的问题是：

一个如何将创造在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 */ 
     /* ??? */ 
}

来源

2010-11-03 etoxin

使用这一个：

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

来源

2012-04-10 10:09:48 cgvector

请注意，在Opera 12.1及更高版本中不再需要-o-前缀。 – 2013-05-01 20:47:08

歌剧does not support CSS3渐变（还）。不过，你可以用box-shadow来模仿他们。见http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/。

来源

2010-11-03 06:24:24

有没有人有这方面的一个例子吗？ – etoxin 2010-11-03 22:41:12

@etoxin：在答案中链接的文章中有相当多的例子。 – 2010-11-07 00:54:36

系统的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>

您也可以直接包括在CSS文件中的SVG，使用数据的URL，如果URL编码SVG。（例如在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);

来源

2010-11-07 00:51:32

CSS3渐变，采用了最新的语法（接近但不完全一样，火狐，因为规范已经发展）目前正在开发在Opera的Presto（我们的渲染引擎）。它可能不会用于Opera 11，但可能会在之后的版本中使用它。

来源

2010-12-05 00:05:00

最新的Opera构建（> = 2042）支持CSS3线性梯度。

来源

2011-03-14 12:34:27 sabiland

应该是同Mozilla的，但与Opera标识符：

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

作品在Opera 11.10及更高版本。

来源

2011-03-17 08:51:16 John

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

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

谢谢大家对张贴。我最近不得不在Opera中实现渐变，这是一个痛苦。

来源

2011-04-30 23:00:47 James

在Dev.Opera已发表的文章如何在歌剧（11.10+）使用线性渐变。 http://dev.opera.com/articles/view/css3-linear-gradients/

来源

2011-05-26 08:33:34 JercSi

对于Opera浏览器

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

来源

2012-12-10 07:41:50 TAJPOINT

如何在Opera中创建CSS3渐变？

回答

相关问题