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

Я хочу, чтобы фон меню списка исчезал, используя непрозрачность, не затрагивая шрифт. Возможно ли это с помощью CSS3?

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

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

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

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

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

Имейте в виду эти три варианта (вы хотите №3):

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

visibility: hidden;

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

opacity: 0.0 - 1.0;

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

background-color: transparent;

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

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

Вот пример класса с использованием именованных цветов 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)

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

Для этого вам нужно изменить background-colorэлемент.

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

• Имя цвета 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или #RGBAобозначением ).

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

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

  Применение:

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

Вы также можете попробовать их:

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

Попробуй это:

opacity:0;

Для IE8 и ранее

filter:Alpha(opacity=0); 

Демонстрация непрозрачности от W3Schools

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

.someDive{
    background:transparent 
}