收藏
回答

mask-image 在 skyline 中引用 svg 存在颜色边

框架类型 问题类型 操作系统 工具版本
小程序 Bug macOS 1.06.2412050

有淡淡的颜色边


.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))
}
回答关注问题邀请回答
收藏

1 个回答

  • ice breaker
    ice breaker
    星期五 00:04
    <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>
    
    星期五 00:04
    有用
    回复
登录 后发表内容