Transparenz mit Bildern

Beispiele zu https://www.hpage.com/forum/grafiken/20137-weissen-rand-entfernen.html

Beispiel 1

Im ersten Beispiel wird einfach ein Bild auf einen farbigen Hintergrund gelegt. Der farbige Hintergrund ist in bestimmten Bildbereichen zu sehen, da das Bild selbst an bestimmten Stellen durchsichtig ist. So etwas geht nur mit Bildern in den Formaten png und gif, jpg unterstützt keine Transparenz.

Es sind keine besonderen Anweisungen in HTML und CSS erforderlich.

Beispiel 2

Im zweiten Beispiel ist beim (gleichen) Bild auch in den Bereichen, die eigentlich nicht durchsichtig die Hintergrundfarbe zu erkennen.

Der CSS-Code hierfür ist:

Der HTML-Code sieht so aus:

Je kleiner der Wert ist, desto stärker scheint der Hintergrund durch.

Beispiel 3

Bei diesem Beispiel werden zwei Bilder übereinandergelegt. Beide Bilder -das Logo und die Schrift- besitzen transparente Bereiche. Das Logo wird als Hintergrundbild eingefügt. Die darüber gelagerte Schrift wird direkt als Bild eingefügt und ähnlich wie im Beispiel 2 mit Transparenzeigenschaften versehen. Dadurch ist durch das Bild mit der Schrift sowohl das Logo als auch der farbige Hintergrund zu sehen.

Der CSS-Code hierfür ist:

Da die beiden Bilder unterschiedliche Abmessungen haben müssen sie mit

50px center

und

margin-top:120px; 
margin-bottom:120px;

positioniert werden.

Der HTML-Code für dieses Beispiel sieht so aus:

Beispiel 4

Jetzt noch ein weiteres Beispiel, diesmal mit einer extra erstellten Grafik. Jeweils die gleiche Grafik sieht einmal so aus:

und einmal so:

Man sieht jeweils die Hinterrundfarbe durchscheinen. Das erfolgt in diesem Fall nicht durch spezielle CSS-Anweisungen sondern wird durch spezielle Eigenschaften der Grafik selbst ermöglich. Im png-Format (gif geht nicht) können nämlich nicht nur vollständig transparente Bereiche sondern auch solche, die teilweise transparent sind. In diesem Fall vermischt sich die teilweise transparente Farbe mit dem Hintergrund der Webseite.

Derartige Effekte kann man mit fast allen professionellen Grafikprogrammen erzielen, auch mit dem kostenlosen Paint.Net

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Kategorie: alle Artikel (9) | Diese Website (5) | NPage (2) | Webdesign (2)

< 1 2 3 >

Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert. (mehr lesen...)
0 Kommentar(e), Kommentar verfassen
 
News und Blogs (14.10.2013 11:51:00)

Der Beitrag zur Erstellung von News und Blogs bei Npage und anderen Anbietern von Websitebaukästen wurde überarbeitet und erweitert. (mehr lesen...)
0 Kommentar(e), Kommentar verfassen
 
Galerie in News (16.07.2013 12:22:00)

Kann man eine NPage galerie in die News einfügen? Ja, man kann. (mehr lesen...)
0 Kommentar(e), Kommentar verfassen
 

< 1 2 3 >

Zum Seitenanfang