Непрозрачность CSS, которая работает для всех браузеров? - PullRequest
13 голосов
/ 12 апреля 2011

Может ли кто-нибудь порекомендовать самый безопасный подход для предоставления значения OPACITY DIV TAG с использованием CSS?

Эрик

Ответы [ 3 ]

23 голосов
/ 12 апреля 2011

Прямо с Css-Tricks.com (это охватывает все, что я могу придумать):

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}
7 голосов
/ 13 апреля 2011

Это будет работать в любом браузере.

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Или вы можете использовать jQuery и сделать это в одной строке

$('div').css({opacity:0.5});

Проверить рабочий пример на http://jsfiddle.net/397jv/

0 голосов
/ 20 июня 2019

Хотя CSS 3 представляет новую функцию прозрачности для прозрачности, он поддерживает не все браузеры.Это CSS трюк для прозрачности во всех браузерах

.transparent_class {  
 filter: alpha(opacity=50);  
 -moz-opacity: 0.5;  
 -khtml-opacity: 0.5;  
  opacity: 0.5;
}    
...