Transparante tekst en achtergrond afbeelding of kleur?

Het korte antwoord is dit: gebruik de CSS kleur rgba() of pas de CSS opacity eigenschap toe die een transparant gedrag 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 achtergrond 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 achtergrondkleur 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.

<style>
.main-div{
    background-image: url(../../images/nature.jpg);
    background-attachment: scroll;
    padding: 20px;  
}
.transparent-bg{
	background: rgba(255, 165, 0, 0.73);
    padding: 20px;
    color: #fff;
    text-align: center;
    font-size: 26px;
}
</style>
<div class="main-div">
	<div class="transparent-bg">
		Transparent Background
	</div>
</div>

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