有淡淡的颜色边
.i-mdi-home {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z'/%3E%3C/svg%3E")
}
.block {
display: block
}
.flex {
display: flex
}
.min-h-screen {
min-height: 100vh
}
.justify-center {
justify-content: center
}
.bg-\[\#43ffff\] {
--tw-bg-opacity: 1;
background-color: rgb(67 255 255 / var(--tw-bg-opacity, 1))
}
.bg-slate-950 {
--tw-bg-opacity: 1;
background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1))
}
.p-8 {
padding: 2rem
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-\[200px\] {
font-size: 200px
}
.text-\[\#234fff\] {
--tw-text-opacity: 1;
color: rgb(35 79 255 / var(--tw-text-opacity, 1))
}
<view class="min-h-screen bg-slate-950"> <view class="p-8"> <view class="i-mdi-home bg-[#43ffff] text-[200px]"></view> <view class="usermotto"> <text class="user-motto text-[#234fff] bg-[#43ffff]">{{motto}}</text> </view> </view> </view>