Vorschau
{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
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
In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.