我想要一個白色的容器，其中的聊天氣泡被遮罩成一個漸變，當滾動時，它會隨著下面的漸變而變化，如下例所示:
我試著扮演。任何聊天氣泡后面的容器是透明的，以便。根可見。
.root {
background-color: linear-gradient(red, yellow);
width: 100vw;
height: 100vh;
}
.container {
width: 100%;
height: 100vh;
background-color: white
}
.chatBubble {
background-color: transparent;
border-radius: 4px;
min-width: 50;
padding: 10px;
}<div class="root"> <div class="container"> <chatBubble>This is a chat bubble</chatBubble> <chatBubble>This is another chat bubble</chatBubble> </div> </div>
你可以& quot陰影& quot從。氣泡:
* {
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;
}<div class="container"> <div class="bubble">show weekend?</div> <div class="bubble primary">I'm down!</div> <div class="bubble">lets do this its been way to long since we were all together!</div> <div class="bubble primary ">Whos down for a pregame</div> <div class="bubble">YES! I got the day off! Say when and where?</div> <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div> <div class="bubble">Yeah getting the band back together</div> <div class="bubble">show weekend?</div> <div class="bubble primary">I'm down!</div> <div class="bubble">lets do this its been way to long since we were all together!</div> <div class="bubble primary ">Whos down for a pregame</div> <div class="bubble">YES! I got the day off! Say when and where?</div> <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div> <div class="bubble">Yeah getting the band back together</div> <div class="bubble">show weekend?</div> <div class="bubble primary">I'm down!</div> <div class="bubble">lets do this its been way to long since we were all together!</div> <div class="bubble primary ">Whos down for a pregame</div> <div class="bubble">YES! I got the day off! Say when and where?</div> <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div> <div class="bubble">Yeah getting the band back together</div> </div>
這是我到目前為止得到的，試圖掩蓋它，這樣我就可以得到白色背景的漸變。
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;
}<div class="container"> <div class="bubble">show weekend?</div> <div class="bubble primary">I'm down!</div> <div class="bubble">lets do this its been way to long since we were all together!</div> <div class="bubble primary ">Whos down for a pregame</div> <div class="bubble">YES! I got the day off! Say when and where?</div> <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div> <div class="bubble">Yeah getting the band back together</div> <div class="bubble">show weekend?</div> <div class="bubble primary">I'm down!</div> <div class="bubble">lets do this its been way to long since we were all together!</div> <div class="bubble primary ">Whos down for a pregame</div> <div class="bubble">YES! I got the day off! Say when and where?</div> <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div> <div class="bubble">Yeah getting the band back together</div> <div class="bubble">show weekend?</div> <div class="bubble primary">I'm down!</div> <div class="bubble">lets do this its been way to long since we were all together!</div> <div class="bubble primary ">Whos down for a pregame</div> <div class="bubble">YES! I got the day off! Say when and where?</div> <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div> <div class="bubble">Yeah getting the band back together</div> </div>
上一篇max vue怎么讀