Przezroczysty kolor tła CSS

Chcę, aby tło menu listy znikało, używając krycia, bez wpływu na czcionkę. Czy to możliwe z CSS3?

teraz możesz używać rgba we właściwościach CSS w ten sposób:

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

0.5 to przezroczystość , zmień wartości zgodnie z projektem.

Demo na żywo http://jsfiddle.net/EeAaB/

więcej informacji http://css-tricks.com/rgba-browser-support/

Pamiętaj o tych trzech opcjach (chcesz nr 3):

1) Cały element jest przezroczysty:

visibility: hidden;

2) Cały element jest nieco przezroczysty:

opacity: 0.0 - 1.0;

3) Tylko tło elementu jest przezroczyste:

background-color: transparent;

tak, to możliwe. po prostu użyj składni rgba jako koloru tła.

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

Oto przykładowa klasa korzystająca z nazwanych kolorów CSS:

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

To dodaje tło, które jest w 25% nieprzezroczyste (kolorowe) i w 75% przezroczyste.

PRZESTROGA Niestety, krycie wpłynie na cały element, do którego jest dołączony.
Więc jeśli masz tekst w tym elemencie, ustawi on również tekst na 25% krycia. :-(

Sposobem na obejście tego problemu jest użycie metod rgbalub hslado wskazania przezroczystości jako części żądanego „koloru” tła. Pozwala to określić przezroczystość tła, niezależnie od przezroczystości innych elementów w elemencie.

Oto 3 sposoby ustawienia niebieskiego tła na 75% przezroczystości bez wpływu na inne elementy:

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

W tym przypadku background-color:rgba(0,0,0,0.5);jest to najlepszy sposób. Na przykład:background-color:rgba(0,0,0,opacity option);

Aby to osiągnąć, musisz zmodyfikować background-colorelement.

Sposoby tworzenia (pół) przezroczystego koloru:

• Nazwa koloru CSS transparenttworzy całkowicie przezroczysty kolor.

  Stosowanie:

    .transparent{
      background-color: transparent;
    }
  

• Korzystanie z funkcji rgbalub hslakolorów, które umożliwiają dodanie kanału alfa (krycia) do funkcji rgbi hsl. Ich wartości alfa mieszczą się w zakresie od 0 do 1.

  Stosowanie:

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

• Oprócz wspomnianych już rozwiązań można również użyć formatu HEX z wartością alfa ( #RRGGBBAAlub #RGBAnotacją ).

  To całkiem nowe (zawarte w CSS Color Module Level 4), ale już zaimplementowane w większych przeglądarkach (przepraszam, brak IE).

  Różni się to od innych rozwiązań, ponieważ traktuje kanał alfa (krycie) również jako wartość szesnastkową, dzięki czemu mieści się w zakresie od 0 do 255 ( FF).

  Stosowanie:

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

Możesz je również wypróbować:

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

Spróbuj tego:

opacity:0;

Dla IE8 i starszych

filter:Alpha(opacity=0); 

Demo krycia od W3Schools

Tak, możesz po prostu zwykły tekst jako

.someDive{
    background:transparent 
}