Прозрачные тени в IE - PullRequest
Новая
       31

Прозрачные тени в IE

2 голосов
/ 15 июля 2011

У меня есть следующий код, который делает коробку с закругленными углами и тенью.Он должен быть совместим со всеми браузерами, и это действительно так, но дело в том, что мне нужна прозрачная тень, а IE не поддерживает значения RGBA: (

<style>
#box {
  width: 250px;
  height: 250px;
  background-color: #1e9ad3;
  padding: 20px;
  margin: 20px;

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  behavior: url(PIE.htc);

  box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
  <div id="box">
    Hello world!
  </div>
</body>

Есть предложения, как это сделать? Моя "коробка"может быть на разных фонах или на фоне с текстурой, поэтому я не могу сделать цвет тени, например, светло-серым.

Вот живой пример: http://bbin.own.cz/box.html

Ответы [ 2 ]

0 голосов
/ 15 июля 2011

Вам нужно будет использовать пользовательские настройки MS для пред IE8 

/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

Не проверял это, но вы можете зайти в Google для получения дополнительной информации. источник

0 голосов
/ 15 июля 2011

Документация CSS3Pie дает ответ.

PIE анализирует значения цвета RGBA везде, где они разрешены. Однако он может успешно отобразить значение их непрозрачности только в нескольких контекстах. Во всех других контекстах они будут отображаться с правильным цветом RGB, но полностью непрозрачным. Вот поддерживаемые контексты, в которых прозрачность будет отображаться правильно:

  • Сплошной цвет фона, указанный в свойстве -pie-background.
  • Значение цвета box-shadow, если тень не имеет размытия.

Короче говоря, ответ - нет, этого нельзя сделать. IE просто не поддерживает RGBA должным образом. CSS3Pie может сделать это в нескольких контекстах, но тень от рамки с размытием не будет работать.

Если CSS3Pie не может этого сделать, то неплохо бы поспорить, что это просто невозможно в IE.

Вы сможете сделать это, если потеряете размытие, но, конечно, это меняет весь эффект, так что это не совсем решение для вас.

...