Как реализовать кросс-браузерный непрозрачный градиент (не цветной градиент) - PullRequest
Новая
       19

Как реализовать кросс-браузерный непрозрачный градиент (не цветной градиент)

6 голосов
/ 16 апреля 2010

Как я могу реализовать кросс-браузерный градиент непрозрачности (не градиент цвета)? Смотрите следующий код: 

<div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div>

Он отлично работает в IE, но не в других браузерах, таких как firefox, safari..etc Каков эквивалентный синтаксис для Firefox? Пожалуйста, не предлагайте мне использовать градиентное изображение.

Ответы [ 2 ]

9 голосов
/ 16 апреля 2010

Есть -moz-linear-gradient для последних версий Firefox и -webkit-gradient для браузеров WebKit. Прозрачность для этих двух должна быть возможной при использовании rgba цветов.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html

Единственное реальное решение, полностью совместимое с браузерами, - это изображение.

6 голосов
/ 22 апреля 2010

Спасибо @ deceze,

Я пишу образец CSS для других людей с таким же требованием 

top:0px;
    opacity: 0.6;       
    width: 1944px; 
    height: 896px; 
    position: absolute; 
    z-index: 500;
background-color:#dcdcdc;
        /* For WebKit (Safari, Google Chrome etc) */
        background: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(rgba(215,212,207,0)));
        /* For Mozilla/Gecko (Firefox etc) */
        background: -moz-linear-gradient(top, #dcdcdc, rgba(215,212,207,0));
        /* For Internet Explorer 5.5 - 7 */
        filter:alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696);
        /* For Internet Explorer 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696)";
...