我想要一个白色容器,聊天气泡被遮罩到渐变,当滚动时会随着下面的渐变而变化,如本例所示:
我试过将.container
后面的部分设置为透明,这样.root
的背景就可以看到了。
.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>
2条答案
按热度按时间brqmpdu11#
您可以从
.bubble
“放置阴影”:hmae6n7t2#
这是我目前所得到的,试图掩盖它,这样我就可以得到白色背景与梯度工作。