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

191

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

Mistu4u
источник
3
Ни , opacityни filterне являются CSS 3 атрибутов. Почему вы думаете, что вы не можете их использовать?
Пекка,
Я не знаю, в моем Eclipse Juno оба атрибута не отображаются, и в соответствии с W3School: Примечание. Свойство непрозрачности CSS является частью рекомендации W3C CSS3. Смотрите здесь
Mistu4u
И мое затмение не поддерживает (скорее всего) CSS3 !! :(
Mistu4u
1
Я бы сказал, что вы можете игнорировать эти сообщения. Некоторые атрибуты находятся за пределами спецификаций, но все еще могут использоваться в реальном мире. Комбинация opacity, filterи некоторые другие атрибуты , как показано здесь: css-tricks.com/css-transparency-settings-for-all-broswers будет охватывать почти каждый браузер есть
Пекк

Ответы:

140

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

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

Пол Флеминг
источник
1
«Поэтому я не могу использовать прозрачность или атрибуты фильтра»
Jerska
4
@Jerska, это предпосылка, которая требует допроса, хотя. Его единственная причина не использовать эти атрибуты, похоже, заключается в том, что его IDE жалуется на них
Pekka
Так есть ли другой способ добиться этого?
Mistu4u
@ Субир, если тебе нужен другой способ, посмотри ответ Джерски. Но, как уже говорилось, кажется сомнительным, почему вы хотите избежать opacityв первую очередь.
Пекка
11
Плакат хотел непрозрачный фон, а не непрозрачный элемент. Текст в элементе также будет непрозрачным при использовании метода opacity. Этот ответ не является полным, чтобы обеспечить это. Использование rgba с резервным png было бы намного лучше.
Рене
353

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

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

background-color: transparent;

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

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

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

По словам Рене , самое лучшее , что нужно сделать будет смешивать оба с 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 .

Демо : Мой JSFiddle

Jerska
источник
3
Также напечатано как комментарий в другом ответе. Лучше всего было бы использовать окраску rgba и описанный png в этом ответе как запасной вариант.
Рене
2
Злость в простоте использования «прозрачного» в атрибуте background-color. Мега слава!
tfont
4

С 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 */
randominstanceOfLivingThing
источник
2

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

user3241848
источник
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 */
АРВИНД ЧАУАН
источник
Пожалуйста, предоставьте некоторые объяснения для вашего ответа и избегайте размещения только ответов кода.
Саид Жианы