Как сделать цвет фона div прозрачным в CSS

Ответ 1

Непрозрачность дает вам прозрачность или прозрачность. См. Пример Сценарий здесь.

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

Примечание: это НЕ свойства CSS3

См. http://css-tricks.com/snippets/css/cross-browser-opacity/

Ответ 2

Проблема с opacity заключается в том, что она также повлияет на содержимое, когда часто вы этого не хотите.

Если вы просто хотите, чтобы ваш элемент был прозрачным, это действительно так же просто, как:

background-color: transparent;

Но если вы хотите, чтобы он был в цветах, вы можете использовать:

background-color: rgba(255, 0, 0, 0.4);

Или определите фоновое изображение (1px на 1px), сохраненное с правой alpha.
(Для этого используйте Gimp, Paint.Net или любое другое программное обеспечение для изображений, которое позволяет вам это сделать.
Просто создайте новое изображение, удалите фон и вставьте в него полупрозрачный цвет, затем сохраните его в png.)

Как сказал René, лучше всего было бы смешивать оба: сначала rgba и 1px от 1px, так как резерв, если браузер не поддерживает альфу:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

См. также: http://www.w3schools.com/cssref/css_colors_legal.asp.

Демо: My JSFiddle

Ответ 3

прозрачный по умолчанию используется для фона

http://www.w3schools.com/cssref/pr_background-color.asp

Ответ 4

Это может быть немного поздно для обсуждения, но неизбежно кто-то наткнется на этот пост, как я. Я нашел ответ, который искал, и подумал, что отправлю его на себя. Следующий JSfiddle включает в себя способ сглаживания .PNG с прозрачностью. Jerska упоминание атрибута прозрачности для div CSS было решением: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

И мое оригинальное вдохновение: http://jsfiddle.net/5g1zwLe3/ Я также использовал paint.net для создания прозрачных PNG, а точнее PNG с прозрачными BG.