Div-Box mit transparenten Hindergrund?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfang
bild
boxen
browser
code
erlaubnis
gesamtheit
hilfe
hintergrundbild
http
laden
machen
pixel
prozent
quellcode
setting
sonderbehandlung
transparenz
url
webseite
-
Seit kurzem frage ich mich ob es möglich ist eine div-box transparent zu machen.
Also diese Box soll so circa 50 Prozent bis 70 Prozent durchsichtig sein, damit ein hintergundbild noch sichtbar ist, aber der div Kasten erkannt wird bzw. sich hervorhebt.
Zudem will ich das nur mit CSS und HTML lösen, da java so weit ich weiß nicht bei jedem client installiert ist. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das macht man per opacity. http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/opacity.
Was Java betrifft, bist du offenbar nicht ganz richtig informiert
. Im Webbrowser benutzt man normalerweise Javascript. Es hat zwar einen ähnlichen Namen, ist allerdings etwas ganz anderes. Java wird im Web nur ganz selten benutzt, um z.B. einen Dateizugriff auf deinen Rechner zu ermöglichen. Dafür benötigt die Webseite allerdings vorher deine Erlaubnis. Javascript kann zwar auch deaktiviert werden, ist aber eher selten.
-
Oh ... Also hat man Java-Anwendungen auf dem Heim-PC von Java-Script auf einer Webseite zu trennen
.
Aber ich meine ja, dass wenn Java im Browser deaktiviert ist, dass die Seite dann nicht mehr so angezeigt wird wie es gedacht war, oder?
p.s.: wird opacity von irgendwelchen Browsern nicht unterstützt?
Beitrag zuletzt geändert: 27.4.2013 14:34:45 von demivee -
demivee schrieb:
....Aber ich meine ja, dass wenn Java im Browser deaktiviert ist, dass die Seite dann nicht mehr so angezeigt wird wie es gedacht war, oder?
Du meinst Java, ist aber tatsächlich JavaScript. Wenn JS im Browser deaktiviert aber für die Darstellung der Seite erforderlich ist, dann gibt es logischerweise Einschränkungen.
demivee schrieb:
p.s.: wird opacity von irgendwelchen Browsern nicht unterstützt?
Wie meistens benötigen die verschiedenen Versionen des IE eine Sonderbehandlung.
Eine empfehlenswerte Seite zum Thema findest du hier. -
Opacity im "Div-Style" macht aber dann auch den kompletten Inhalt, der sich in der Div-Box befindet, transparent. Ich würde dir raten, wenn du z.b. ein Bild transparent machen willst, diesen Skript benutzt:
(für 50% Transparenz - 0.7 für 70% usw.)<img src="link" STYLE="OPACITY:0.5;">
Beitrag zuletzt geändert: 28.4.2013 14:05:14 von dagojannik -
wenn die div-box nur eine hintergrundfarbe und kein hintergrundbild hat, kannst du die farbe einfach als rgba() angeben (der vierte parameter ist die transparent --> 1 - 0)
70% transparent mit einem blauen hintergrund würde dann so aussehen:
<div style="background-color:rgba(0,0,255,0.7);"></div> -
Beim IE8 sollte man im Style noch
filter: alpha(opacity=70);
Einfügen. IE will da schon wieder einmal Extrabehandlung. -
Via Quellcode ist vor allem bei Mouseovereffekten besser, weil du dann nur ein Bild laden musst und du den Effekt via opacity steuerst. Aber natürlich gehts mit bereits vorweg bearbeiteten Bildern auch. Ist bei den heutigen Übertragungsgeschwindigkeiten wohl eine Geschmacksfrage und keine der Professionalität
-
lunaticfay schrieb:
ich hab das bisher immer so gemacht, dass ich das bild, welches transparent sein soll vorn anfang an mit hilfe von photoshop oder ähnlichem transparent gemacht und als .png gespeichert hab...
ist das eher unprofessionell und die variante via quellcode besser?
Weder noch, denn es ist etwas ganz anderes. Transparenz per Opacity, bzw. ähnlicher CSS-Anweisungen, betrifft das Bild in seiner Gesamtheit. Eine Definition transparenter Bereiche in Photoshop (oder auch Gimp oder irgendeinem anderen Bildbearbeitungsprogramm) betrifft eben nur die Bereiche dieses Bildes, die Du als Transparent definierst. -
Also für Transparenz würde ich das nicht diekt mit CSS/Opacity machen. Erstelle dir am Besten ein 1 mal 1 Pixel großes transparentes Bild (z.B. mit Gimp) und mache es dann als Hintergrundbild für den Div-container. So ist es kompatibel mit fast allen Browsern. Außerdem braucht ein 1 Pixel Bild auch nicht lange zum Laden, erklärt sich bei der Größe ja von selbst.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
