Transparante CSS-achtergrondkleur

Ik wil de achtergrond van het lijstmenu laten verdwijnen door dekking te gebruiken, zonder het lettertype aan te tasten. Is het mogelijk met CSS3?

Antwoord 1, autoriteit 100%

nu kunt u rgba gebruiken in CSS-eigenschappen zoals deze:

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

0.5 is de transparantie, verander de waarden volgens uw ontwerp.

Live demo http://jsfiddle.net/EeAaB/

meer info http://css-tricks.com/ rgba-browser-support/

Antwoord 2, autoriteit 36%

Houd deze drie opties in gedachten (u wilt #3):

1) Het hele element is transparant:

visibility: hidden;

2) Het hele element is enigszins transparant:

opacity: 0.0 - 1.0;

3) Alleen de achtergrond van het element is transparant:

background-color: transparent;

Antwoord 3, autoriteit 13%

ja, dat kan. gebruik gewoon de rgba-syntaxis voor je achtergrondkleur.

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

Antwoord 4, autoriteit 8%

Hier is een voorbeeldklasse die CSS-kleuren gebruikt:

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

Dit voegt een achtergrond toe die 25% dekkend (gekleurd) en 75% transparant is.

WAARSCHUWING
Helaas heeft de dekking invloed op het hele element waaraan het is gekoppeld.
Dus als je tekst in dat element hebt, wordt de tekst ook ingesteld op 25% dekking. 🙁

De manier om hieraan voorbij te gaan, is door de methoden rgba of hsla te gebruiken om transparantie* aan te geven als onderdeel van de gewenste “achtergrondkleur”. Hiermee kunt u de achtergrondtransparantie* specificeren, onafhankelijk van de transparantie van de andere items in uw element.

• Technisch gezien stellen we de ondoorzichtigheid in, hoewel we vaak graag spreken/denken in termen van transparantie. Het is duidelijk dat ze gerelateerd zijn, inverses van elkaar, dus het een bepaalt het ander.
  Het opgegeven getal is het dekkingspercentage. 1 is 100% dekkend, 0% transparant & vice versa).

Hier zijn 3 manieren om een ​​blauwe achtergrond in te stellen op 75% dekking (25% transparant), zonder andere elementen te beïnvloeden:

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

Antwoord 5, autoriteit 7%

Om dit te bereiken, moet u de background-color van het element.

Manieren om een ​​(semi-)transparante kleur te maken:

• De CSS-kleurnaam transparent creëert een volledig transparante kleur.

  Gebruik:

  .transparent{
    background-color: transparent;
  }
  

• rgba of hsla kleurfuncties, waarmee u het alfakanaal (dekking) kunt toevoegen aan de functies rgb en hsl. Hun alfa-waarden variëren van 0 – 1.

  Gebruik:

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

  Vanaf CSS-kleurmodule niveau 4, rgb en hsl werken op dezelfde manier als rgba en hsla, waarbij een optionele alfawaarde wordt geaccepteerd. Dus nu kun je dit doen:

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

  Overweeg echter om de a-varianten te gebruiken voor meer ondersteuning.

• Naast de reeds genoemde oplossingen, kunt u ook het HEX-formaat met alfawaarde gebruiken (#RRGGBBAA of #RGBA notatie).

  Dat is vrij nieuw (bevat in CSS Color Module Level 4), maar al geïmplementeerd in grotere browsers (sorry, geen IE).

  Dit verschilt van de andere oplossingen, omdat dit het alfakanaal (dekking) ook als een hexadecimale waarde behandelt, waardoor het varieert van 0 – 255 (FF).

  p>

  Gebruik:

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

Je kunt ze ook uitproberen:

• transparent:

  ---

  Antwoord 6, autoriteit 6%

  In dit geval is background-color:rgba(0,0,0,0.5); de beste manier.
  Bijvoorbeeld: background-color:rgba(0,0,0,opacity option);

  ---

  Antwoord 7, autoriteit 4%

  Probeer dit:

  opacity:0;
  

  Voor IE8 en eerder

  filter:Alpha(opacity=0); 
  

  Demo van dekking van W3Schools

  ---

  Antwoord 8, autoriteit 2%

  Ja, u kunt gewoon tekst zonder opmaak gebruiken als

  .someDive{
      background:transparent 
  }