通过改变类名渲染不同背景图的简洁写法

最新推荐文章于 2024-08-15 09:51:27 发布

原创最新推荐文章于 2024-08-15 09:51:27 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

技术资料专栏收录该内容

188 篇文章

订阅专栏

本文探讨了在使用CSS时遇到的背景图片未能正确加载的问题，并提供了具体的解决方案。通过调整background-size属性的应用方式，实现了图片的有效加载，同时保持代码简洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起初为了节省代码量只在此标签加入background-size，类名只用background-image渲染，

发现图片并未加载。但又不想重复书写造成页面冗杂，故找寻并进行多次尝试运用于项目中，代码如下：

i {
    display: inline-block;
    @include size(48px, 48px);
    background: no-repeat center/100%;
    background-image: url("image/success.png"); 
    margin-bottom: 23px;
    margin-top: 50px;
    &.wait {
        background-image: url("image/ico_wait.png");
    }
    &.pay {
        background-image: url("image/icon_cancel.png");
    }
}

　　注：background-size只适用于移动端，pc增加会出问题。。。