• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Deckkraft von Farben.

Status
Für weitere Antworten geschlossen.
M

Moochi

Neues Mitglied
Hi,
da ich noch nicht sonderlich HTML-bewandert bin und mir bereits die Finger wund getippt habe, frage ich nun hier.
Also ich habe einen sehr bunten Hintergrund auf meiner Homepage, wodurch Schriftfarben schwer lesbar sind. Also habe ich ein extra Feld angelegt und es mit einem einfachen weiß gefüllt (+ Rahmen drum). Dadurch ist die Schrift zwar gut zu lesen, aber es sieht etwas...nun ja merkwürdig aus. Also würde ich gerne wissen ob, und wenn ja wie, man die Deckkraft der weißen Fläche verringern kann.

LG,
Moochi
 
Körnerbrötchen schrieb:
Entweder du ersetzt die Farbe "weiß" durch eine halbtransparente PNG-Grafik.
33%ige PNG
50%ige PNG
oder du nutzt das CSS-Attribut "-moz-opacity". Dies wird aber nur vom FF unterstützt. Die obige Methode ist somit die bessere. ;)
Zum Vergrößern anklicken....

Danke für die schnelle Antwort, aber da kommt schon die nächste dumme Frage: Wie bekomme ich das jetzt mit der Grafik hin? Einfach das bgcolor Attribut so ändern, dass ich den Pfad zum Hintergrundbild, also dem weiß, eingeben muss?
 
Also hier mal mein Code:
Code: 
<div style="background-color: #FFFFFF; overflow:auto; width:175px; height:75px; padding:5px; border:10px #EF5E89 ridge; align:center"><center><font face="Tahoma" color="#EF5E89" size="1">name.&nbsp;&nbsp;↔&nbsp;&nbsp;michelle.<br>gender.&nbsp;&nbsp;↔&nbsp;&nbsp;female.<br>age.&nbsp;&nbsp;↔&nbsp;&nbsp;<b>5</b>teen.<br>hometown.&nbsp;&nbsp;↔&nbsp;&nbsp;norden.<br>hobbies.&nbsp;&nbsp;↔&nbsp;&nbsp;gfx. & music ♥</font></center></div>
Könntet ihr mit den so umändern, dass das nicht mehr die weiße Fläche, sondern die Halb-Transparente PNG-Datei ist?
 
opacity

Körnerbrötchen schrieb:
oder du nutzt das CSS-Attribut "-moz-opacity". Dies wird aber nur vom FF unterstützt. Die obige Methode ist somit die bessere. ;)
Zum Vergrößern anklicken....
Ich bin mir nicht sicher ob das die besser Methode ist.
Transparente png werden Im IE erst ab Vers7 richtig dargestellt.
Opacity ist css3 und wird von aktuellen Opera und Safari unterstützt.
Internet Explorer ab Vers.5 haben einen eigenen Filter filter:Alpha(opacity=wert) ältere Mozilla, wie du schon sagtest -mozopacity.
Firefox2.0 unterstütz glaube ich auch schon opacity.
Ein Nachteil ist, daß die Schrift ebenfalls an Deckkraft verliert.

Deckkraft 50%:
Code: 
#tranzparent {
 -moz-opacity : 0.5; /*ältere mozilla*/
 opacity : 0.5; /*neuere Browser/*
 color : #000000; /* möglichst Kontrastreich*/
 filter:Alpha(opacity=50); /*IE ab Vers.5*/
 }
Mit Positionierungs-Tricks kann man die Schrift auch ohne reduzierte Deckkraft darstellen.
Wenn die Schrift nicht zu Blass ist, kann man auch ohne diese Tricks schöne Ergebnisse bekommen.
 
Zuletzt bearbeitet:
Also ich habe es jetzt mal mit dem "opacity" versucht, aber wie neuroleptika bereits erwähnte, nimmt die gesamte Deckkraft, also auch die der Texte ab. Ich würde es gerne nochmal mit dem Bild versuchen. Es wäre also nett wenn mir jemand den geposteten Code (siehe Post 4) so ändern könnte.
Ich hoffe das ist möglich.

LG,
Moochi
 
Hm.
Ich glaube ich muss mir eine ganz neue Vorgangsweise überlegen, denn auch hierbei hat das Image die Schrift und den Rahmen verblassen lassen.
Könnt ihr mir sagen, wie ich es schaffe, dass der Hintergrund meines Feldes weiß/halb-transparent ist, aber Rahmen und Schrift in 100% angezeigt werden? :oops::(
 
opacy

Moochi schrieb:
...Könntet ihr mit den so umändern, dass das nicht mehr die weiße Fläche, sondern die Halb-Transparente PNG-Datei ist?..
Zum Vergrößern anklicken....
Hier mein Beispiel ohne png:
Code: 
<div
 style="
 background-color: #FFFFFF;
 overflow:auto;
 width:175px;
 height:75px;
 padding:5px;
 border:10px ridge #EF5E89;
 text-align:center; color: #000000; font-family : Tahoma; font-size: 1em;
 color : #000000;
 -moz-opacity : 0.5;
 opacity : .5;
 color : #000000;
 filter:Alpha(opacity=50);
 ">
<p>
 name.&nbsp;&nbsp;&nbsp;&nbsp;michelle.<br>
gender.&nbsp;&nbsp;&nbsp;&nbsp;female.<br>
age.&nbsp;&nbsp;&nbsp;&nbsp;
<strong>5</strong>teen.<br>
hometown.&nbsp;&nbsp;&nbsp;&nbsp;norden.<br>
hobbies.&nbsp;&nbsp;&nbsp;&nbsp;gfx. & music
</p>
</div>
Ich hoffe ich hab mich nicht vertippt.


Ich habe doppelt gepostet, weil
Code: 
 beim editieren gestreikt hat.
 
neuroleptika schrieb:
Hier mein Beispiel ohne png:
Code: 
<div
 style="
 background-color: #FFFFFF;
 overflow:auto;
 width:175px;
 height:75px;
 padding:5px;
 border:10px ridge #EF5E89;
 text-align:center; color: #000000; font-family : Tahoma; font-size: 1em;
 color : #000000;
 -moz-opacity : 0.5;
 opacity : .5;
 color : #000000;
 filter:Alpha(opacity=50);
 ">
<p>
 name.&nbsp;&nbsp;&nbsp;&nbsp;michelle.<br>
gender.&nbsp;&nbsp;&nbsp;&nbsp;female.<br>
age.&nbsp;&nbsp;&nbsp;&nbsp;
<strong>5</strong>teen.<br>
hometown.&nbsp;&nbsp;&nbsp;&nbsp;norden.<br>
hobbies.&nbsp;&nbsp;&nbsp;&nbsp;gfx. & music
</p>
</div>
Ich hoffe ich hab mich nicht vertippt.


Ich habe doppelt gepostet, weil
Code: 
 beim editieren gestreikt hat.[/quote]

Danke, aber leider verblasst der Text und der Rahmen hier auch :(
Zum Vergrößern anklicken....
 
Moochi schrieb:
Hm.
Könnt ihr mir sagen, wie ich es schaffe, dass der Hintergrund meines Feldes weiß/halb-transparent ist, aber Rahmen und Schrift in 100% angezeigt werden?
Zum Vergrößern anklicken....
Das ist schwierig und geht nur mit komplizierten Tricks.
Opacity lässt sich nicht zurücksetzen.
Am einfachsten ist es wenn du border und color dunkler angibst als den normalen Text.

Ansonsten Körnerbrötchens Vorschlag:
Ein halbtransparentes png erzeugen und background-color gegen backgroundimage austauschen.
Code: 
backgroundimage: url(halptransparentes.png);
Den ganzen opacity-kram dann löschen.
Das sieht aber je nach Farbe im IE6 komisch aus.
 
Zuletzt bearbeitet:
Da das alles nicht so will werde ich es für heute lassen. Trotzdem vielen Dank euch beiden für eure Hilfe. Gute Nacht ;Jump
 
HTML: 
<div style="
  /*background-color: #FFFFFF;*/
  background-image: url('./HalbTransparentesPNG.png'); /* HIER ;) */
  overflow:auto;
  width:175px;
  height:75px;
  padding:5px;
  border:10px #EF5E89 ridge;
  font-family: Tahoma; /* Hier noch als hilfe ;) */
  color: #EF5E89; /* Und der auch */
  font-size: 1em; /* ...Und das */
  text-align:center
">name.&nbsp;&nbsp;↔&nbsp;&nbsp;michelle.<br>gender.&nbsp;&nbsp;↔&nbsp;&nbsp;female.<br>age.&nbsp;&nbsp;↔&nbsp;&nbsp;<b>5</b>teen.<br>hometown.&nbsp;&nbsp;↔&nbsp;&nbsp;norden.<br>hobbies.&nbsp;&nbsp;↔&nbsp;&nbsp;gfx. & music ♥</div>
 
nimm doch nicht eine der Grundfarben, sondern eine Farbe, die von Hause aus schon ein wenig heller ist. Dann brauchst du dir keine Sorgen um Opacy oder Browserkompabilität machen.
Also statt #FF0000 (normales Rot) nimmst du einfach Coral (#FF7F50) oder soetwas.
Wenn du bei Wikipedia "Webfarben" eingibst, dann bekommst du eine Liste mit den Farben. Such dir doch einfach dort eine aus, die nicht ganz so kräftig ist.
 
Neue Frage xD

So, meine nächste Frage steht in den Startlöchern:
Also erstmal der Link zur Seite...Pumuckel92s HP
Die rechts- und linksbündigen Kästen (2. und 4.) hätte ich gerne auf höhe des zweiten Kastens "nebeneinander". Also halt nicht direkt sondern den einen auf dieser Höhe linksbündig und den anderen auf gleicher Höhe, aber rechts. Geht das?
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben