Как реализовать Перекрестный Градиент Непрозрачности Браузера (Не Цветовой градиент)
Как я могу реализовать перекрестный градиент непрозрачности браузера (не цветовой градиент)? См. следующий код:
<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, сафари.. и т.д. Что такое эквивалентный синтаксис для Firefox? Не предлагайте, чтобы я использовал изображение градиента.
2 ответа
Есть -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
Однако единственное реальное решение, полностью совместимое с кроссбраузерностью, - это изображение.
Спасибо @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)";