Webdesign: Gibt es einen CSS-Style, bei dem der Text automatisch die entgegengesetzte Farbe vom Hintergrund annimmt (z.B. bei einem farblich 2-geteilten Bilds?

Background-Text-Exchange - (Text, CSS, background)

5 Antworten

Ich werde dir keine fertige Lösung zeigen, da ich nachher eine Prüfung habe, aber eine Idee geben wie es funktionieren könnte. Meiner Meinung nach sollte es auf jeden Fall lösbar sein.

<div style="width: 100vH; background-color: #FFF; color: #F00;"><p>Beispiel</p></div>
<div style="width: 50vH; background-color: #F00; color: #FFF;"><p>Beispiel</p></div>

Jetzt musst du nur noch schauen, dass sich die beiden Container überlappen und der Text in der Mitte der divs angezeigt wird. "align: center" und "overflow: hidden" sollten hier weiter helfen.

Ich denke das ganze ist durchaus machbar und nicht mal so schwierig. Falls du noch Fragen hast frag gerne, aber probier vorher ein wenig mit der Idee herum. Ab heute Nacht habe ich wieder Zeit ;)

Liebe Grüße, JutenMorgen!

Ja, kann man mit CSS lösen, wird aber nicht bei allen (älteren) Browsern funzen.

// CSS
.background:{
width: 200px;
height: 100px;
margin: 50px auto;
background: -moz-linear-gradient(left, #cc0000 0%, #cc0000 50%, #ffffff 50%, #ffffff 100%);
background: -webkit-linear-gradient(left, #cc0000 0%, #cc0000 50%, #ffffff 50%, #ffffff 100%);
background: linear-gradient(to right, #cc0000 0%, #cc0000 50%, #ffffff 50%, #ffffff 100%);
border: 1px solid #cc0000;
text-align: center;
line-height: 100px;
}
.text{
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #cc0000 50%, #cc0000 100%);
background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 50%, #cc0000 50%, #cc0000 100%);
background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #cc0000 50%, #cc0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 50px;
}

// html
<div class="background">
<span class="text">Beispiel</span>
</div>

Auf meinem aktuellen Firefox & Chrome klappts zumindest.

Super!

Bei mir scheint es nur auf dem Chrome zu klappen.

Trotzdem vielen Dank!

1
@RhoMalV

Ich habs auf FF 50.1.0 getestet, da hats geklappt. Müsstest evtl. nochmal die browserspezifischen Präfixe anpassen / prüfen.

Jenachdem wie wichtig das ist, gibts auch Tools um zu prüfen welcher Browser welches CSS kann.

0
@Bluewater1403

Ja. So ein Tool wäre wahrscheinlich ziemlich praktisch.

Denn dooflicherweise muss man sich ja bezüglich Browserkompatiblität immer auf den kleinsten gemeinsamen Nenner beschränken.

Gerade bei mir ist der Safari mein größtes Sorgenkind. Der Browser schafft es ja noch nicht einmal ein Bild nach max-width zu skalieren, sondern schneidet das Bild einfach an entsprechender Stelle ab.

Komischerweise sehen auf Safari auch die Schriften alle ganz anders aus. Selbst die, die als Webfont offiziell eingespeist wurden.

0

Idealerweise auch innerhalb des jeweiligen Buchstabens, der gerade auf der Mitte liegt.

Zumindest das ist mit css nicht lösbar.

Was möchtest Du wissen?