Как создать градиент CSS3 в Opera?
Я могу создавать градиенты CSS в IE6/7/8/9/FF3.6+ и Chrome (см. ниже).
мой вопрос:
как создать градиент в 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 ответов
Опера 10.x поддерживает SVG в фоновых изображениях, а SVG позволяет делать градиенты так же, как расширения CSS Firefox и Safari.
поддержка фона SVG Opera, похоже, имеет некоторые неприятные ошибки, когда ваш элемент также имеет границы в 10.0 и ниже, но с 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>
вы также можете включить SVG непосредственно в файл CSS, используя url данных, если вы url кодируете SVG. (Например, в Python вы можете сделать это, удалив новые строки и ненужные пробелы, а затем передав содержимое файла в urllib.quote
).
это немного нечитабельно, но он сохраняет HTTP-запрос, и если у вас есть более одного градиента SVG, встроенного в ваш CSS-файл, вы должны увидеть некоторую экономию полосы пропускания по отдельным файлам (при условии, что ваш CSS-файл gzipped).
/* 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);
должен быть таким же, как Mozilla, но с идентификатором Opera:
-o-linear-gradient(top, #dcdcdc, #c6c6c6);
работает в Opera 11.10 и новее.
На Dev.Opera была опубликована статья Как использовать линейные градиенты на Opera (11.10+). http://dev.opera.com/articles/view/css3-linear-gradients/
CSS3 градиенты, используя последний синтаксис (ближе, но не точно так же, как Firefox, как спецификация эволюционировала) находятся в разработке в Opera Presto (наш движок рендеринга). Вероятно, он не сделает это для Opera 11, но, вероятно, сделает это для версии после.
Опера не поддерживает CSS3 градиенты (пока). Вы можете как-то эмулировать их, используя
- o-линейный градиент (сверху, #dcdcdc, #c6c6c6);
это, безусловно, лучший вариант. Я попробовал метод SVG, и он не только выглядит ужасно в коде, но и приводит к тому, что фон исчезает в firefox.
спасибо всем за проводки. Мне пришлось недавно реализовать градиенты в опере, и это было больно.