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

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

Derek 朕會功夫
Редактировал вопрос 19-го июля 2015 в 12:16
Программирование
html css background-color transparent
4-го августа 2012 в 8:57
34 просмотров
Комментарии к вопросу (7)

Проблема с 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.

Demo : [My JSFiddle](http://jsfiddle.net/APSnL/68/)

Jerska
Редактировал ответ 4-го августа 2017 в 12:20
Комментарии (2)
Решение

Непрозрачность дает полупрозрачность или прозрачность. Смотрите пример [Fiddle here][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/

Adrien Be
Редактировал ответ 24-го февраля 2014 в 11:35
Комментарии (12)

transparent - это значение по умолчанию для background-color.

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

Комментарии (2)

От 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 */
Комментарии (0)

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

HTML-код:

   toggle
   <div id="box" style="display:none;" ></div>
   toggle
   <div id="box2" style="display:none;"></div>
   toggle
   <div id="box3" style="display:none;" ></div>

Усс:

#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; }

ДШ:

$('#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.сеть/5g1zwLe3/ Я также использовал paint.net для создания прозрачного изображения в формате PNG'ы или, вернее, ПНГ's с прозрачным БГ'ов.

Комментарии (0)
    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */
Комментарии (1)