Transparantie achtergrond tekst afbeelding kleur

In deze handleiding leer je hoe je tekst, een achtergrondkleur of een achtergrondafbeelding transparant maakt in WordPress met CSS. Voorbeelden en code.

Logo cursus traing wordpress

Transparantie achtergrond tekst afbeelding kleur

Transparante tekst en achtergrond afbeelding of kleur?

Het korte antwoord is dit: gebruik de CSS rgba() of pas de CSS opacity eigenschap toe die een transparant creëert voor het geselecteerde element. Ik geef je enkele voorbeelden van transparante kleuren die ik vaak gebruik:

background-color: rgba(0, 0, 0, 0.9); /* Transparant bijna zwart */
background-color: rgba(0, 0, 0, 0.15); /* Transparant lichtgrijs zwart */
background-color: rgba(255, 255, 255, 0.8); /* Transparent bijna wit */
background-color: rgba(255, 255, 0, 0.75); /* Transparent geel */

Hoe maak je achtergrondkleur transparant met CSS RGBA()

Na het toepassen van het effect op het element, is het achterste deel van de nog enigszins zichtbaar voor de kijker. Dit kan handig zijn wanneer je tekst wilt toevoegen aan de container. Laten we eens kijken met de voorbeelden hieronder.

Je kunt CSS RGBA() kleurcode gebruiken om een transparante te maken. Dit effect is handig om de tekst achtergrond zichtbaar te maken voor de bezoekers. Zie het voorbeeld hieronder om een achtergrond met transparante kleur toe te voegen met CSS.


Transparent Background

Bekijk voorbeeld

Transparante achtergrondafbeeldingen

Er is geen background-opacity eigenschap in CSS, maar je kunt het namaken door een pseudo-element in te voegen met normale opacity van de exacte grootte van het element erachter.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Transparantie achtergrond instellen met RGBA

Als u de tekst Transparant wilt houden en alleen de CSS-transparantie voor achtergronden wilt instellen, raad ik je aan de RGBA-functie te gebruiken. Hiermee kunt u de ondoorzichtigheid specifiek voor de achtergrond aangeven.

div {
    background: rgb(136, 66, 213, 0.4) /* Purple background with 40% opacity */
}

Meer info:

https://www.bitdegree.org/learn/best-code-editor/css-image-opacity-transparency-using-rgba-example


Meer informatie over Transparantie achtergrond tekst afbeelding kleurof info?

Wil je meer informatie? Veel web-designers met interesse in Transparantie achtergrond tekst afbeelding kleur bekeken ook de onderstaande veel gelezen handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je WordPress website of webshop beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Transparantie achtergrond tekst afbeelding kleur?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Transparantie achtergrond tekst afbeelding kleur en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven