简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Scrollbare Chat-Blase mit Farbverlauf
P粉197639753
P粉197639753 2023-09-01 11:52:18
0
2
513

Ich möchte einen weißen Container mit einer Chat-Blase mit einem Farbverlauf, der sich beim Scrollen mit dem Farbverlauf unten ändert, wie in diesem Beispiel gezeigt:

Ich habe versucht, den .container-Teil hinter jedem chatBubble transparent zu machen, damit der Hintergrund von .root sichtbar ist. 

.root { Hintergrundfarbe: linearer Farbverlauf (rot, gelb); Breite: 100vw; Höhe: 100 Vh; } .container { Breite: 100 %; Höhe: 100 Vh; Hintergrundfarbe: weiß } .chatBubble { Hintergrundfarbe: transparent; Randradius: 4px; Mindestbreite: 50; Polsterung: 10px; }
 
 Dies ist eine Chat-Blase Dies ist eine weitere Chat-Blase

P粉197639753
P粉197639753

Antworte allen (2)
P粉293550575
P粉2935505752023-09-02 11:22:49 2 Etage

这就是我到目前为止所得到的，试图掩盖它，这样我就可以让白色背景与渐变一起使用。

html, body, .container { height: 100%; } body { margin: 0; font-family: system-ui; } .container { display: flex; flex-flow: column nowrap; max-width: 60ch; margin: auto; padding: 1rem; background-color: white; } .container::before { content: ''; position: fixed; inset: 0; background: linear-gradient(red, yellow); } .bubble { z-index: 1; min-width: 50px; width: fit-content; background-color: #eee; border-radius: 4px; padding: 0.5em; margin: 0.2em; text-wrap: balance; } .bubble.primary { color: white; background-color: transparent; background-blend-mode: multiply; align-self: end; text-align: end; }
 
show weekend?
 
I'm down!
 
lets do this its been way to long since we were all together!
 
Whos down for a pregame
 
YES! I got the day off! Say when and where?
 
Hows about Old Town at 4? we can get some grub and then head over to the venue
 
Yeah getting the band back together
 
show weekend?
 
I'm down!
 
lets do this its been way to long since we were all together!
 
Whos down for a pregame
 
YES! I got the day off! Say when and where?
 
Hows about Old Town at 4? we can get some grub and then head over to the venue
 
Yeah getting the band back together
 
show weekend?
 
I'm down!
 
lets do this its been way to long since we were all together!
 
Whos down for a pregame
 
YES! I got the day off! Say when and where?
 
Hows about Old Town at 4? we can get some grub and then head over to the venue
 
Yeah getting the band back together
Wie+0
Antwort hinzufügen
    P粉277824378
    P粉2778243782023-09-02 11:18:14 1 Etage

    您可以从.bubble中“放置阴影”：

    * { margin: 0; padding: 0; box-sizing: border-box; } .container { --gap: 20px; --width: 800px; --background: #fff; display: flex; flex-direction: column; max-width: var(--width); margin: 16px auto; padding: 0 16px; overflow: hidden; gap: var(--gap); box-shadow: 0 0 0 100vw var(--background); font-family: sans-serif; } .container:before { content: ''; inset: 0; position: fixed; z-index: -1; background: linear-gradient(purple, blue); } .bubble { max-width: 80%; background-color: lightgray; border-radius: 16px; padding: 8px 16px; box-shadow: 0 0 0 var(--gap) var(--background); position: relative; } .bubble::before, .bubble::after { content: ''; position: absolute; inset: calc(var(--gap) / -2) auto; background-color: var(--background); width: var(--width); } .bubble::before { right: 100%; } .bubble::after { left: 100%; } .bubble.primary { background-color: transparent; color: #fff; align-self: flex-end; }
     
    show weekend?
     
    I'm down!
     
    lets do this its been way to long since we were all together!
     
    Whos down for a pregame
     
    YES! I got the day off! Say when and where?
     
    Hows about Old Town at 4? we can get some grub and then head over to the venue
     
    Yeah getting the band back together
     
    show weekend?
     
    I'm down!
     
    lets do this its been way to long since we were all together!
     
    Whos down for a pregame
     
    YES! I got the day off! Say when and where?
     
    Hows about Old Town at 4? we can get some grub and then head over to the venue
     
    Yeah getting the band back together
     
    show weekend?
     
    I'm down!
     
    lets do this its been way to long since we were all together!
     
    Whos down for a pregame
     
    YES! I got the day off! Say when and where?
     
    Hows about Old Town at 4? we can get some grub and then head over to the venue
     
    Yeah getting the band back together
    Wie+0
    Antwort hinzufügen
      Beliebte Themen
      Mehr>
      Populäre Artikel
      Beliebte Tutorials
      Mehr>
      Verwandte Tutorials
      Beliebte Empfehlungen
      Aktuelle Kurse
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！