如何在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漸變？

回答

相關問題