Прозорий колір тла 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кольорові функції, що дозволяють додати альфа-канал (непрозорість) до функцій rgband 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 Color Module Level 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 
}