
html
<view class="bg-decoration">
<view class="circle-1"></view>
<view class="circle-2"></view>
<view class="circle-3"></view>
</view>
css
/* 背景装饰 */
.container{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.bg-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.circle-1,
.circle-2,
.circle-3 {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.circle-1 {
width: 200rpx;
height: 200rpx;
top: -100rpx;
right: -50rpx;
}
.circle-2 {
width: 150rpx;
height: 150rpx;
bottom: 200rpx;
left: -50rpx;
}
.circle-3 {
width: 100rpx;
height: 100rpx;
bottom: 100rpx;
right: 100rpx;
}