Forum - Transparenz-Effekte - Text und Bilder auf transparenten Hintergrundbildern!

<style>
.background {
  background: url("https://files.homepagemodules.de/b104774/pictures_u459_heUwnVIR.jpg") no-repeat center top;
 
  /* Bilder werden wiederholt (mit Zwischenraum) */
  /* background-repeat: space; */
 
  /* Bilder werden wiederholt (ohne Zwischenraum) */
  /* background-repeat: repeat; */
 
  /* Hintergrund wird in Kacheln angezeigt. Inhalt des Bildes ist immer erkennbar */
  /* background-size: 300px 300px; */
 
  /* Passt sich automatisch der Bildschirmgröße an, achtet auch auf den Text */
  /* background-size: auto; */
 
  /* Zeigt immer das komplette Bild verzerrungsfrei an, unabhängig von der Monitorgröße */
  /* background-size: contain; */
 
  /* Das Bild wird auf die Größe des Monitors verzerrungsfrei eingestellt. Das Bild wird nicht komplett angezeigt. */
  background-size: cover;
 
}
.box-background { 
  padding: 20px;
  background-color: rgba(255,255,255,0.6);
  /* background-color: #ffffff; */
  /* opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; */
}
.box-background .text-background {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
.box-background .text-background img {
  object-fit: cover;
}
</style>
 
<div class="background">
  <div class="box-background">
    <div class="text-background">
	  
      <img title="Ein Bild, dass in einer transparennten Box Platz findet!" src="https://files.homepagemodules.de/b104774/pictures_u459_heUwnVIR.jpg" width="200px"><br>
      Ein Text, der in einer transparenten Box Platz findet!
		
    </div>
  </div>
</div>
 

[backgroundTrans={{image}}={{size}}]
...  
[/backgroundTrans]
 

[backgroundTransW={{image}}={{size}}={{art}}]
...  
[/backgroundTransW]
 

<div style="background: url('{{image}}') center top; background-repeat: space; background-size: {{art}};"><div style="background-color: rgba(255,255,255,{{size}}); padding:10px;">  
...  
</div></div>
 

https://files.homepagemodules.de/b2001010/a_799_50667aa9.png
 

Reihenfolge: 0