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. Третий устанавливает фон с альфа-прозрачностью. Браузеры, которые не поддерживают это, будут игнорировать его и использовать более раннее объявление.

я надеюсь это поможет тебе:)

Другие вопросы по тегам