IE8 линейный градиент, радиус границы и непрозрачность
У меня есть div, который имеет линейный градиент, радиус границы и непрозрачность. это работает в ie9+,ff, chrome и т. д.
но в IE8 у меня есть проблема (с помощью css3pie):filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#40000000", endColorstr="#40FFFFFF",GradientType=1 );
это получит мой градиент и мою непрозрачность, но игнорирует мой border-radius: 0 0 100% 0;
когда я использую фон пирога:-pie-background: linear-gradient(right, #cce6f5 21%, '.$block_color.' 110%);
мой линейный градиент работает, и мой радиус границы работает, но я не могу заставить работать непрозрачность. Я пытался:
opacity:0.4 // not supported in IE8
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);
ничего из вышеперечисленного не работает.
Как я могу заставить всех трех из них работать на одном div в IE 8?
РЕДАКТИРОВАТЬ полный CSS блока:
width: 204px;
height: 87px;
margin-top: 20px;
opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-o-border-bottom-right-radius: 100%; /* Opera */
-webkit-border-bottom-right-radius: 100%;
-moz-border-radius-bottomright: 100%;
border-radius:0 0 100% 0;
position:relative;
z-index:1;
background-image: linear-gradient(right, #cce6f5 21%, '.$block_color.' 110%);
background-image: -o-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
background-image: -moz-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
background-image: -webkit-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#40'.$ms_block_color.'",endColorstr="#40CCE6F5",GradientType=1 );
zoom:1;
background-image: -webkit-gradient(
linear,
right ,
left ,
color-stop(0.21, #cce6f5),
color-stop(0.80, '.$block_color.')
);
behavior: url(/includes/PIE.htc);
1 ответ
Если у вас конфликт с IE8, попробуйте этот пример:
.div {
background:rgb(0,0,0);
background:rgba(0,0,0,0.4);
-pie-background:rgba(0,0,0,0.4);
}
также: 1. установить фон с прозрачностью альфа-канала: 1-й для IE без PIE, 2-й для IE PIE, 3-й для других 2. Использовать поведение для IE8 3. предотвратить IE9 с помощью примера PIE:
:root *> .div {
behavior: none;
}
Имейте в виду, что есть три объявления для фона. Первый - это запасной вариант, который будет показывать сплошной цвет фона, если PIE не работает (т.е. Javascript отключен). Второе - это объявление для PIE, которое будет игнорироваться всеми браузерами, кроме IE, использующими PIE. Третий устанавливает фон с альфа-прозрачностью. Браузеры, которые не поддерживают это, будут игнорировать его и использовать более раннее объявление.
я надеюсь это поможет тебе:)