полупрозрачный div на веб-странице - PullRequest
Новая
       23

полупрозрачный div на веб-странице

4 голосов
/ 24 февраля 2010

Эй, я разрабатываю веб-сайт, на котором я хочу отобразить div с полупрозрачным фоном, чтобы фон страницы был виден Я хочу, чтобы это работало на всех браузерах. я в порядке, используя CSS, JS или JQuery ... пожалуйста, дайте мне предложения и, если возможно, пример кода ..

Спасибо заранее, Радж

Ответы [ 6 ]

8 голосов
/ 24 февраля 2010

Вероятно, вам лучше всего использовать чистый CSS. Этот метод работает в Safari 3.2+, IE 5.5+, Firefox 3.05+, Chrome 4+ и Opera 10 + 

div {
  /* black for browsers which cannot support rgba */
  background-color: #000;

  /* 70% opacity for supported browsers */
  background-color: rgba(0, 0, 0, 0.7);

  /* IE 5.5+ support #BB000000 is ~70% opacity on black */
  filter:progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#BB000000, endColorstr=#BB000000
  );

  /* IE 8 support */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#BB000000, endColorstr=#BB000000
  )";
}
1 голос
/ 24 февраля 2010

Если вы используете opacity, то весь div, включая текст, будет на этом уровне непрозрачности.

Если ваши посетители используют браузер Webkit (Chrome, Safari) или Gecko (Firefox) (возможно, также Presto (Opera), но я не уверен), тогда вы можете использовать:

#divToMakePartiallyOpaque {background-color: rgba(150,150,150,0.5); }

, где красный, зеленый и синий каналы установлены на 150, а альфа установлен на 0.5 (на полпути между полностью прозрачным и полностью непрозрачным).

Существует также возможность использования частично прозрачного фонового изображения, как отмечено в другом месте.

1 голос
/ 24 февраля 2010

Для браузеров, совместимых с CSS: Element.style.opacity = decimal от 0-1
Для IE [он же дьявол]: element.style.filter = "alpha (opacity =" + (число от 0 до 100) + ")"

Примеры по: http://www.w3schools.com/Css/css_image_transparency.asp

Обратите внимание, что текст / содержимое в div также станет полупрозрачным.

Пример, который устанавливает непрозрачность div на 50%: 

var myElement = document.body.getElementById("elemId");
myElement.style.opacity = 0.5;
myElement.style.filter = "alpha(opacity=50)"; //For the devil, IE

Кстати, 1 [или в случае IE, 100] - полностью видимый, а 0 - полностью прозрачный.

Надеюсь, это поможет! ; -)

0 голосов
/ 13 октября 2010

Эльмо ​​сказал или: 

opacity= .5; 
filter:Alpha(opacity=50);  
background-color: rgba(0, 0, 0, 0.7);
0 голосов
/ 24 февраля 2010

Если вы согласны с решением jQuery, для всех браузеров, которые поддерживает jQuery, будет работать следующее (Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+, Chrome 1+): 

$('div').css('opacity', 0.5);
0 голосов
/ 24 февраля 2010

Вы также можете использовать полупрозрачный PNG.Насколько я знаю, IE 6 не поддерживает полупрозрачность, но я верю, что IE7 + и остальные основные браузеры поддерживают.

...