Прозрачный цвет фона CSS

Ответ 1

теперь вы можете использовать rgba в свойствах CSS следующим образом:

.class{
    background: rgba(0,0,0,0.5);
}

0,5 - это прозрачность, измените значения в соответствии с вашим дизайном.

Живая демоверсия http://jsfiddle.net/EeAaB/

больше информации http://css-tricks.com/rgba-browser-support/

Ответ 2

Помните эти три варианта (вы хотите # 3):

1) Весь элемент прозрачен:

visibility: hidden;

2) Весь элемент несколько прозрачен:

opacity: 0.0 - 1.0;

3) Только фон элемента прозрачен:

background-color: transparent;

Ответ 3

да, это возможно. просто используйте синтаксис rgba для фонового цвета.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

Ответ 4

В этом случае background-color:rgba(0,0,0,0.5); - лучший способ. Например: background-color:rgba(0,0,0,opacity option);

Ответ 5

Вот пример класса с использованием CSS именованных цветов:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

Это добавляет фон, который на 25% непрозрачный (цветной) и 75% прозрачный.

CAVEAT К сожалению, непрозрачность повлияет на весь элемент, к которому она прикреплена.
Поэтому, если у вас есть текст в этом элементе, он также установит непрозрачность текста на 25%. :-(

Чтобы обойти это, используйте методы rgba или hsla чтобы указать прозрачность как часть желаемого "цвета" фона. Это позволяет вам задавать прозрачность фона, независимую от прозрачности других элементов в вашем элементе.

Вот 3 способа установить синий фон с прозрачностью 75%, не затрагивая другие элементы:

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

Ответ 6

Попробуйте следующее:

   opacity:0;

Для IE8 и более ранних

filter:Alpha(opacity=0); 

Непрозрачность Demo из W3Schools

Ответ 7

Да, вы можете просто текст как

    .someDive{
    background:transparent 
}

Ответ 8

Чтобы достичь этого, вы должны изменить background-color элемента.

Способы создания прозрачного цвета (semi-):

Имя цвета CSS transparent создает полностью прозрачный цвет.

Применение:

.transparent{
  background-color: transparent;
}

Использование цветовых функций rgba или hsla, позволяющих добавить альфа-канал (непрозрачность) к функциям rgb и hsl. Их значения альфа варьируются от 0 до 1.

Применение:

.semi-transparent-yellow{
  background-color: rgba(255,255,0,0.5);
}
.transparent{
  background-color: hsla(0,0%,0%,0);
}

Помимо уже упомянутых решений, вы также можете использовать формат HEX с альфа-значением (нотация #RRGGBBAA).

Это довольно новое (содержится в CSS Color Module Level 4), но уже реализовано в более крупных браузерах (извините, нет IE).

Это отличается от других решений, так как трактует альфа-канал (непрозрачность) также как шестнадцатеричный, в диапазоне от 0 до 255 (FF).

Применение:

.semi-transparent-yellow{
  background-color: #FFFF0080;
}
.transparent{
  background-color: #00000000;
}