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

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

<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? Пожалуйста, не предлагайте мне использовать градиентное изображение.

источник

2010-04-16 Brij

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

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://developer.apple.com/safari/library/documentation/...

Единственный реальный 100% -ный раствор совместим с различными браузерами представляет собой изображение, хотя.

источник

2010-04-16 05:55:54 deceze

Этот ответ не является правильным для этого вопроса. Кажется, что не эквивалент старого фильтра IE: alpha start/finish для mozilla или gecko через CSS. – PlayGod

Я пытаюсь выяснить, как получить изображение с горизонтальной непрозрачностью градиента, поэтому может отображаться вертикальный градиент предыдущего div. Это связано с тем, что в моем приложении пользователь загрузит изображение, для которого требуется градиент непрозрачности, поэтому решение должно быть чистым css/js. – PlayGod

Он будет работать с IE, но, возможно, вы не можете применить линейный градиент непрозрачности к фону изображения. moz и gecko фактически создают изображение, когда вы используете линейный градиент rgba, и градиент, по-видимому, может идти только в одном направлении. Чтобы получить эффект, который нам нужен, вам понадобится возможность указать один направленный градиент для непрозрачности и другой направленный градиент для цветового градиента. – PlayGod

Благодаря @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)";

источник

2010-04-22 05:20:24 Brij

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

ответ

Смежные вопросы