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

Я не использую CSS3. Поэтому я не могу использовать opacity или filter атрибуты. Без использования этих атрибутов, как я могу сделать background-color прозрачный из div? Это должно быть своего рода примером текстового поля в этом ссылке. Здесь цвет фона текстового поля прозрачный. Я хочу сделать то же самое, но без использования вышеупомянутых атрибутов.

159
background-color css html transparent

5 ответов

непрозрачность дает вам прозрачность или прозрачность. Пример скрипку здесь.

-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/

123

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

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

background-color: transparent;

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

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

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

по словам Рене, лучше всего было бы смешать оба, с rgba первый и 1px by 1px изображение в качестве резервного, если браузер не поддерживает alpha:

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

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

демо : Мой JSFiddle

302

прозрачный по умолчанию цвет фона

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

10

от https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

установить цвет фона:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */
3

это может быть немного поздно для обсуждения, но неизбежно кто-то наткнется на этот пост, как и я. Я нашел ответ, который искал, и подумал, что отправлю свой собственный взгляд на него. Следующие JSfiddle включает в себя, как слой .PNG с прозрачностью. Упоминание йерска атрибута прозрачности для CSS для элемента div было решение: 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.

2