Transparenten Hintergrund
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
browser
code
datei
definieren
effekt
element
erstellen
farbe
fazit
format
hintergrund
http
image
problem
schein
schrift
text
transparentes bild
transparenz
-
Hi,
ich hab ein Hintergrund und dann noch ein Divcontainer mit einem Hintergrund.Dieser soll aber durchsichtig sein.
Wie mach ich das?
-moz ....
Hab ich mal irgendwo gesehen.
Es soll aber in eine externe CSS-Datei rein.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
in die externe css einfach folgendes schreiben:
.divname {
background: transparent;
}
Beitrag geändert: 28.9.2008 13:06:16 von alphara -
Ok, aber darf ich dann noch background-image: haben?
-
So wie ich das jetzt verstehe möchtest du, dass das Hintergrundbild es div-containers einen Wasserzeicheneffekt hat, also teilweise durchsichtig ist. Dazu würde ich am besten, diese Bild teilweise durchsichtig machen. Grafikprogramme wie Gimp, Photoshop und Co. können sowas machen. Du musst es dann als .png abspeichern, da dieses Format "teilweise Transparenz" besitzt.
Es gibt auch die Möglichkeit, das über CSS zu lösen, jedoch ist das Browserabhängig und bei dem was du meinst, würde z.B. Internet Explorer, das Bild nicht transparent anzeigen!
LG -
Ich würde den Hintergrund einfach mit Gimp erstellen, und die später transparenten Bereiche transparent machen (vollständig oder teilweise).
Dann einfach als .png abspeichern und mit background-image:url(datei.png); einbinden.
Dann freuen, dass es geht
Gruß, Prog -
prog schrieb:
Ich würde den Hintergrund einfach mit Gimp erstellen, und die später transparenten Bereiche transparent machen (vollständig oder teilweise).
Dann einfach als .png abspeichern und mit background-image:url(datei.png); einbinden.
Dann freuen, dass es geht
Gruß, Prog
Genau das sagte ich doch:P
Selbst wenn da nur eine Farbe rein soll, die teilweise transparent ist, reicht es eine 1x1 px große Grafik zu erstellen und dort mit der Farbe, je nachdem wie viel Deckkraft sie haben soll, zu füllen. Wichtig ist dass es als PNG gespeichert wird! -
Ok, ich hab zwar Photoshop, aber ich hab damit nur n bisschen rumexperimentiert.
Wie mach ich denn die Grafik transperent?
-
Hast du schon ein Bild?
Wenn ja: Es sollte irgendwo ne Option Deckkraft geben. Dort wo du auch die Ebenen findest, schätze ich. Dann kannst du von 100% etwas herunter regulieren.
Wenn nein: Erstell ein neues Dokument und fülle es mit der gewünschten Farbe/Bild, dann wieder wie oben beschrieben, Deckkraft der Ebene suchen und reduzieren.
In beiden Fällen "speichern unter" und als Format .png wählen!
-
Ich hab das mit Deckkraft jetzt gesehen, nur kann ich den Hintergrund nicht verändern.
Wenn ich eine neue Ebene einfüge, dann kann ich die Deckkraft davon verändern, aber vom Hintergrundbild nicht. -
Hm. Es könnte sein, dass Hintergrundebenen was "Besonderes" sind und man deshalb nicht die Deckkraft so einfach ändern kann. Versuch mal einen von den beiden Optionen:
1. Öffne dein Bild, kopiere es und lege ein neues Dokument an in das du das Bild kopierst. Wenns dann nicht Hintergrund ist, dann kann man die Deckkraft ja verändern!
2. Schau mal ob man nicht einstellen kann, dass es nicht die Hintergrundebene ist, also vllt. Einstellungen oder dort wo die Ebenen sind.. Kenn mich damit eigentlich nicht aus.. -
Ahhh, man kann "Ebene aus Hintergrund" machen.
Ok, dann ist das Bild transperent ^^
Aber ob s auf der Seite dann nicht doch den Hintergrund verdeckt .
Danke erstmal.
EDIT:
Hab das Bild erstellt und bin mir nicht sicher ob das auch wirklich transperent ist ^^
Bin grad nicht zu Hause und kann das deshalb nicht überprüfen.
Geht filter:alpha(opacity=75); -moz-opacity: 0.75; denn nicht?
Beitrag geändert: 28.9.2008 18:03:25 von seth93 -
Hier [http://www.css4you.de/trickkiste/tr00018.html] steht was darüber. Das sollte dann für die meisten Browser funktionieren. Trotzdem rate ich eigentlich, dass durch ein Bild zu machen, da eben nicht alle Browser abgedeckt werden uns es sehr ärgerlich wäre, wenn ein Bild den Inhalt verdeckt!
-
Hier steht auch noch etwas darüber:
http://www.css4you.de/moz-opacity.html
ich habe mal selber damit herumexperimentiert war einfach nur Spielerei:
http://malia.lima-city.de/ozean/ozean.php
sehen kann man den Effekt aber nicht in allen Browsern, deswegen würde ich davon abraten.
Grüsse Malia
Beitrag geändert: 28.9.2008 21:37:51 von malia -
Danke, bei mir klappt s mit Mozilla und IE.
Wie sieht es denn aus wenn es nicht klappt?
Ich kann das leider nicht nachprüfen.
EDIT:
Am Anfang fiel das Wort Wasserzeichen.
Wie macht man das denn ^^
Beitrag geändert: 29.9.2008 7:32:40 von seth93 -
Es hat bei mir mit dem Opera nicht geklappt, es ist mit diesem Browser nicht transparent.
Wasserzeichen mache ich wenn überhaupt damit:
http://www.bildschutz.de/
Grüsse Malia -
Zur Ergänzung: In HTML bezeichnet man als Wassserzeichen-Effekt, wenn man einem Bild die Eigenschaft fixed gibt, z.B.
background: url(bild.jpg) fixed;
Hier [http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_attachment] wird das näher erläutert.
Um verschiedene Browser zu testen, empfehle ich die Seite http://browsershots.org/. Dort kann man einfach auswählen, von welchen Seiten ein Browsershot gemacht werden soll. Allerdings funktioniert das nicht so gut bei Seiten mit Werbung, da die Werbung im Endeffekt die ganze Seite bedeckt!
Lg -
Ok,danke für die Links und für die Hilfe.
-
Ja, das mti der Schrift hat mich genervt.
Meinste ich soll den Text außerhalb von Div machen?
Und den Backgroudn von Div dann transperent und den Text dann da raufschieben?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
