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?

Hallo,

angenommen ich habe einen Bildschirm oder Container, der sich durch ein background-gradient in zwei senkrechte Spalten aufteilt. (sagen wir mal in rot und weiß)

Wenn dann ein zentrierter Text auf der roten Fläche beginnt, soll dieser in weiß dargestellt werden und ab dort, wo er in den weißen Flächenbereich hineingeht soll er die Textfarbe in rot darstellen. Idealerweise auch innerhalb des jeweiligen Buchstabens, der gerade auf der Mitte liegt.

Ist sowas überhaupt allein mit CSS möglich?

Hab mal zur Verdeutlichung ein Beispielbild hinzugefügt.

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

4 Antworten

DarkJohnson

23.01.2017, 13:30

Ich schätze würde man eher als Bild machen, oder vielleicht mit JavaScript. Für CSS ist mir nichts dergleichen bekannt

abbrechen

25.01.2017, 20:11

blend-mode ist das Zauberwort.

http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color/25707161#25707161

DarkJohnson

03.04.2017, 18:47

@abbrechen

nice.

JutenMorgen

23.01.2017, 13:41

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!

GanMar

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

23.01.2017, 13:15

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

Zumindest das ist mit css nicht lösbar.

Minilexikon

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

24.01.2017, 13:25

Ich denke mal, das sollte dir weiterhelfen: http://stackoverflow.com/a/25707161

Ähnliche Beiträge

HTML+CSS: Wie bekomme ich Text Zentriert in einem Inline-Flex?

Folgender jsfiddle:

https://jsfiddle.net/t38zjxow/

CSS:

div {
  display:flex;
}

span {
  background:#0f0;
  display:inline-flex;
  width:10em;
  margin:1em;
  text-align:center;
}

HTML:

<div>
  <span>test1</span>
  <span>test2</span>
</div>

Wie bekomme ich die beiden Texte zentriert?

...zum Beitrag

HTML und CSS: Text im Button zentrieren?

Auf dem Bild ist ein Bild der Buttons, HTML und meiner CSS Datei.

Ich möchte jetzt den Text in den Buttons, also "Youtube" und "Spotify", zentriert und etwas größer ist.

...zum Beitrag

Textfarbe des von JavaScript ausgegebenen Textes ändern?

Hallo, ich schreibe gerade eine HTML-Seite.

Dabei benutze ich ein JS um zu bestimmten Uhrzeiten einen bestimmten Text auszugeben. Dazu benutze ich die Funktion getTime().

Wie kann ich den Text, der hierbei ausgegeben wird (also durch answer="xxx" ) verändern? Also durch CSS z.B. die Schriftfarbe und -größe ändern??

Hier mein bisheriger Code:

...zum Beitrag

Text über Bild anzeigen lassen? Webdesign?

Hallo,

ich würde gerne auf einer Internetseite Text auf einem Hintergrundbild anzeigen lassen.

Das Bild habe ich über CSS mit background-image: url(Bildname); eingefügt. Den Text normal mit HTML. Der Text wird zwar jetzt auch auf dem Bild angezeigt, allerdings mit einem weißen Hintergrund mitten im Bild (siehe Bild). Der Text soll aber natürlich ohne diesen Hintergrund angezeigt werden.

Da ich noch relativer Anfänger bin und nicht weiter weiß, hoffe ich erstmal hier auf Hilfe.

Danke im Vorraus.

...zum Beitrag

CSS Text Mittig aber linksbündig?

Hey, ich möchte in CSS einen Text in der Mitte haben aber auch linksbündig. (Die Anfänge sollten auf der roten Linie sein.)

...zum Beitrag

html/CSS Hervorhebung durch Rahmen?

Hallo,

für den Informatik-Unterricht müssen wir auf einer eigenen html/CSS-Website die Kontaktdaten durch folgende Formatierungen hervorheben:

einen Rahmen der Breite 200 Pixel
eine Rahmenlinie von 1 Pixel Stärke
einen schwarzen Hintergrund
die Schriftfarbe magenta für die Überschrift und den Text, beide sollen zudem zentriert werden.

Außerdem sollen diese Daten zentriert auf der Seite positioniert werden.

Alle Vorgaben habe ich in die CSS-Datei eingearbeitet, sowie in der html-Datei durch ein div-Element verbunden. Jedoch wird der Rahmen auf meiner Website (Bild 1) zu breit. (Musterlösung: siehe Bild 2).

Kann mir jemand helfen?

Bild 1:

Bild 2:

...zum Beitrag

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zum Beitrag

Button mittig unter Bild Zentrieren HTML/CSS?

Hallo erstmal, ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte. Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite. Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio"> 
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%; 
}

P.s. ich bin Anfänger

Danke schon mal

...zum Beitrag

CSS + Hover + WP - Wie gleichzeitig Rahmen & Text hovern?

Hallo Community :)

Ich habe einen Rahmen mit Text (ein Link)

Wenn ich mit der Maus über den Rahmen gehe kommt ein Hover-Effekt (Rahmen-Farbe verändert sich).

Wenn ich dann weiter in die Mitte des Rahmens gehe bis zum Text (ein Titel mit Verlinkung), dann verändert er erst seine Text-Farbe

Ich möchte aber, dass sobald ich den Rahmen mit der Maus berühre, dass sowohl Rahmen UND Text den Howereffekt bekommen

Habt Ihr dafür eine Lösung?

.rahmen { border: 8px solid blau; }

.text a { color: blau; padding 40px 40px 40px 40px; }

.rahmen:HOVER { border: 8px solid rot; }

.text a:HOVER { color: rot; }

...zum Beitrag

CSS Code funktioniert? rote Klammer? was soll ich tun. Ist meine erste Website?

Hallo, ich programmiere meine erste Webiste, ich habe den Code in CSS, html usw. angepasst, so, dass die Website im Vollbildmodus oder im verkleinertem Browser Bildschirm den Text so anzeigen soll das der Text auf der rechten Browserhälfte angezeigt wird

, der Code ist fertig bis auf eine Sache die ich nicht verstehe. Der eine Code in CSS scheint nicht richtig zu sein und eine geschweifte Klammer leuchtet rot, aber da ich Anfänger bin, weiß ich nicht was ich an dem Code ändern soll damit er funktioiniert. Der Code istim Bild zu sehen

...zum Beitrag

CSS Text Mittig ausrichten trotz max-width?

Hi,

also ich habe ein Text erstellt, und habe diesem gesagt "text-align: center", und eine max-width: 20%;

Aber ernimmt zwar jetzt die 20% max-width, aber zentriert den Text nicht mehr Links?

warum?

...zum Beitrag

HTML/CSS: Wie kann ich den Text neben dem zweiten Symbol zentrieren?

Hallo,

ich brauche Hilfe. Ich möchte den Text „Announcements“ so verschieben, dass es neben dem zweiten Symbol zentriert ist (siehe erster Text „My courses“).

Dankeschön.

Es wäre nett, wenn ihr antworten würdet.

...zum Beitrag

HTML/CSS: Floats überlappen sich beim Minimieren, wie behebt man das?

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zum Beitrag

Durch Javascript erzeugten Text farbig darstellen, wie geht das?

Hallo ich würde gerne in meinen Javascript Code (per CSS) bestimmte Variablen farbig angeben, damit sie danach auch immer wieder farbig angezeigt werden.

Gespraech=Gespraech+"\n"+"Kunde: "+Antwort;

"Gespraech" und "Antwort" sind jeweils definierte Felder, in diese wird Text erzeugt. Auf diese würde ich gerne (per CSS) zugreifen und den erzeugten Text in unterschiedlichen Farben erzeugen lassen. Bsp: Rot und Grün.

Danke für eure Hilfe!

MfG.

Ghost

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen