12 Oktober 2012

Bilder transparent machen - Part I

Einen sehr schönen Effekt, den man ganz einfach mit Hilfe von CSS erzielen kann, ist die Transparenz von Bildern, also so wie es gerade auf meinem Blog (Stand 12.10.2012) der Fall ist. Es ist ganz einfach zu machen und gibt dem Blog - meiner Meinung nach zumindest - das gewisse Etwas.

Heute zeige ich euch wie ihr das erreichen könnt.
Schwierigkeitsgrad: ○ (einfach)

Methode 1: Transparenz von nur einem (bestimmten) Bild

Die Transparenz von einem bestimmten Bild im Text zu erreichen ist relativ einfach. Erstellt dafür ganz normal einen neuen Post. Für unser Beispiel nehmen wir ein Bild von Megan Fox. Bildquelle: http://img2.timeinc.net/people/i/2008/database/meganfox/megan_fox300a.jpg


Geht dann anschließend auf HTML und fügt folgenden Code hinzu:

Bild von Megan Fox, unbearbeitet

<div style> <img src="bild.gif" style="filter:alpha(opacity=75);-moz-opacity: 0.75; opacity: 0.75;"> </div>
Die Transparenz des Bildes ist hier auf 75% gestellt, so dass der Hintergrund durchscheint. Das beste Ergebnis ist hier, wenn man von vornherein einen weißen Hintergrund hat. Andere gehen aber selbstverständlich auch.

Bei bild.gif gebt ihr die URL des Bildes ein. (Rechtsklick auf ein Bild, Grafikinfo anzeigen, die Adresse kopieren.)

Relevant ist aber das, wo opacity steht. Denn das ist letztendlich wichtig für unsere Transparenz. Wichtig: nicht wundern, warum es da mehrmals steht. Manchmal muss man es für die einzelnen Browser extra einstellen. 


Mozilla: -moz-opacity: akzeptiert Werte von 0.00 (totale Transparenz) bis 1.00 (keine Transparenz),
Allgemeine Eigenschaft: opacity: akzeptiert Werte von 0.00 (totale Transparenz) bis 1.00 (keine Transparenz), 
Internet Explorer: filter:alpha(opacity=) Werte von 0 (totale Transparenz) bis 100 (keine Transparenz).


    Transparenz: 75                         Transparenz: 50                       Transparenz: 25

Das war's auch schon. Ich hoffe, das Tutorial war einigermaßen verständlich. Bei Fragen, fragt mich einfach! In Teil 2 werde ich euch zeigen, wie ihr die Transparenz für alle Bilder mit Hilfe von CSS ändern könnt.

Im Übrigen habe ich oben einen neuen Menüpunkt "Webdesign" eingefügt, welcher zur Übersicht dienen soll. Wie findet ihr es?

1 Kommentar:

  1. Grüß gott,
    Ich bin neulich zufälligerweise auf eure Internetseite gestoßen.

    Ich habe seit einigen Jahren diffusen Haarausfall. Mein Haar
    wird immer Lichter. Ich bin jetzt 30 Jahre. Ich habe mich blöderweise nicht konsequent gesund ernährt.
    Ist es wirklich vorstellbar durch Ernährung auf basische Art diesen Trend
    zu blockieren und das neues Haar sprießen kann. Momentan nehme ich des Weiteren Koffeinschampoo.

    Ist das empfehlenswert?
    Danke
    Also visit my blog post : kreisrunder haarausfall ursachen

    AntwortenLöschen

Share some Love. Leave a Comment! <3

Related Posts Plugin for WordPress, Blogger...