negativ durchsichtige Schrift css
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alpha
aussehen
beispiel
code
deckung
durchsichtiger schrift
element
farbe
glauben
gradient
hintergrund
http
image
probieren
problem
schrift
spezifikation
test
url
wirken
-
Hallo,
Ich habe das Problem das ich einen div Conteiner mit rgba(0,0,0,0.2) durchsichtig gemacht habe.
Nun möchte ich, das die Schrift wieder die Farbe des Hintergrundes bekommt aber rgba(0,0,0,-0.2) funktioniert nicht
Bitte um Hilfe da ich im Internet nichts brauchbares gefunden habe.
w3j -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Weil das so nicht geht wie Du dir das denkst. Durchsichtig wird Dein Div mit allem was drin ist. Wenn die Schrift nicht durchsichtig sein soll (bzw eine geringere Opazität haben soll), dann darf sie nicht Kindelement des Divs mit dem Alphawert sein.
Du hast:
Div (alphawert) -> Schrift
Du brauchst
· · · · · Element (alphawert)
· · · · · · /
· · · ·Div
· · · · · · \
· · · · · Schrift
Beitrag zuletzt geändert: 20.8.2014 17:10:53 von sonok -
Du könntest ja mal probieren, einen Gradienten zu verwenden, also
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);
Das müsste eigentlich genausso wirken, als wenn du eine PNG - Grafik mit komplett Schwarz und 20% Deckung als background-image verwendest.
Beitrag zuletzt geändert: 20.8.2014 17:19:43 von mein-wunschname -
Denke mal dass du RGBA noch nicht richtig verstanden hast, also hier mal ein Beispiel:
background-color: rgba(0, 0, 0, 0.1); /* 10% Deckkraft */ color: rgba(0, 0, 0, 1); /* 100% Deckkraft */
Also der Alpha-Wert ist immer 100 * WERT = WERT%
In deinem Fall wäre der Alpha-Wert -20%, welcher in der CSS3 Spezifikation nicht vorgesehen ist.
http://www.w3schools.com/cssref/css_colors_legal.asp
Beitrag zuletzt geändert: 21.8.2014 4:47:24 von strange -
Hallo,
Hab ausprobiert ob es funktioniert wenn ich den text nicht in den div mit dem Hintergrund lege, hatt aber auch nicht funktioniert, genauso wie mit opacity
Eigendlich schade das das wohl nicht funktioniert
w3j -
Am besten, du zeigst mal, was du gemacht hast.
-
Hallo,
Sehr vereinfacht soll es dann so aussehen, nur mit -20% durchsichtiger Schrift:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <meta charset="utf-8"> <title>footer test</title> <style> body { padding: 0px; margin: 0px; } footer b{ position: fixed; bottom: 5px; left: 15px; color: rgba(0,0,0,0.2); //20% negativ z-index: 8; font-family: Monospace; font-size: 18px; } footer b a{ color: rgba(0,0,0,0.2); //20% negativ } div.footer{ position: fixed; bottom: 0px; left: 0px; right: 0px; width: 100%; height:32px; z-index: 8; background-color: rgba(0,0,0,0.2); } </style> </head> <body> <div class="footer"> <footer> <b> <a href="#">link1</a> | <a href="#">link2</a></b> </footer> </div> </body> </html>
w3j -
Schau dir das mal an
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <meta charset="utf-8"> <title>footer test angepasst</title> <style> body { padding: 0px; margin: 0px; background-color: red; } footer { position: fixed; bottom: 5px; left: 15px; /* color: rgba(0, 0, 0, 0.2);*/ /* 20% negativ */ z-index: 8; font-family: Monospace; font-size: 18px; } footer a { color: rgba(0, 0, 0, 1); font-weight: 800; /* 20% negativ */ } div.footer { position: fixed; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 32px; z-index: 8; background-color: rgba(0, 0, 0, 0.2); } </style> </head> <body> <div class="footer"> <footer> <a href="#">link1</a> | <a href="#">link2</a> </footer> </div> </body> </html> -
Hallo mein-wunschname,
ich glaube du hast mich falsch verstanden.
Ich wollte das die Schrift wieder die Farbe des Hintergrundes annimmt und nicht 100% Schwarz wird, sondern in deinem Fall rot.
w3j -
w3j schrieb:
Hallo mein-wunschname,
ich glaube du hast mich falsch verstanden.
Ich wollte das die Schrift wieder die Farbe des Hintergrundes annimmt und nicht 100% Schwarz wird, sondern in deinem Fall rot.
w3j
Ich will nicht absolut behaupten, dass es nicht geht, aber dazu fällt mir keine Lösung ein.
Hast du so etwas schon einmal irgendwo gesehen? -
Wie ich schon sagte:
Eigendlich schade das das wohl nicht funktioniert
Aber ich habe so etwas schon einmal gesehen, aber die haben es wahrscheinlich einfach durch color: #farbe-des-hintergrundes gelöst
w3j -
Versuche mal:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <meta charset="utf-8"> <title>footer test angepasst</title> <style> body { padding: 0px; margin: 0px; background-color: red; /* Hintergrund Farbe deiner Wahl */ } footer { position: fixed; bottom: 5px; left: 15px; /* color: rgba(0, 0, 0, 0.2);*/ /* 20% negativ */ z-index: 8; font-family: Monospace; font-size: 18px; } footer a { color: red; /* Hintergrund Farbe */ font-weight: 800; text-decoration: none; /* Unterstrichen aus */ /* 20% negativ */ } div.footer { position: fixed; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 32px; z-index: 8; background-color: rgba(0, 0, 0, 0.8); } </style> </head> <body> <div class="footer"> <footer> <a href="#">link1</a> | <a href="#">link2</a> </footer> </div> </body> </html> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
