【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面

你挚爱的强哥

已于 2024-05-25 16:39:39 修改

阅读量6.1k

点赞数

分类专栏： CSS2/CSS3/LESS/SASS/SCSS/HTML 文章标签： css 前端 css3

于 2021-08-11 08:02:04 首次发布

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/119591991

版权

CSS2/CSS3/LESS/SASS/SCSS/HTML 专栏收录该内容

104 篇文章 4 订阅

订阅专栏

这是我们最终想要达到的效果，并且支持任意宽高缩放不变形。注意哟这次不一样的是有透明度！

开始准备物料

第一步：切片，建议用九宫格的形式，切割有考究，主要是最大限度、最小尺寸囊括多个边界转角处的样式(亮蓝色是参考线，白色文字是描述区域规则，红色文字是宽高、分割输出的png图片文件名，正中的宫格就用1像素宽高png背景图拉伸[注意是拉伸不是平铺！])

第二步：输出文件（一共是9个png文件：lt、mt、rt、lm、mm、rm、lb、mb、rb.png），需要注意小细节，我的每张图片都做了透明度，只为让卡片有一丢丢的透明效果

第三步：定义样式（如果嫌弃我的代码太多，可以无脑照搬直接拷贝代码，只要严格按照上图的切片命名规则，适当修改下变量$l_w、$r_w、$t_h、$b_h的像素值就可以搞定了）

<div class="sg-card"></div>

// 酷炫卡片背景************************************************
.sg-card {
    // 公共变量定义----------------------------------------
    $card-bg: "~@/assets/softwareIndustryBigBrain/common/card/"; //异形背景图片路径前缀
    // $card-bg-color: #020f2e; //中间背景纯色
    $l_w: 46px; //左侧边界宽度
    $r_w: 88px; //右侧边界宽度
    $t_h: 72px; //顶部边界高度
    $b_h: 46px; //底部边界高度
    // ----------------------------------------

    // display: inline-block;//这个根据实际情况来（非必选）

    min-width: calc(#{$l_w} + #{$r_w}); //最小宽度等于左右两端边界宽度之和
    min-height: calc(#{$t_h} + #{$b_h}); //最小高度等于上下两端边界高度之和

    // background-color: $card-bg-color; //背景色（不需要,被mm.png替代）

    background-repeat: no-repeat; //一定要用不平铺的属性

    // 核心代码----------------------------------------
    background-image: 
        // 顶部左、中、右
        url(#{$card-bg}lt.png), url(#{$card-bg}mt.png), url(#{$card-bg}rt.png),
        // 中间层左、中、 右
        url(#{$card-bg}lm.png), url(#{$card-bg}mm.png), url(#{$card-bg}rm.png),
        // 底部左、中、右
        url(#{$card-bg}lb.png), url(#{$card-bg}mb.png), url(#{$card-bg}rb.png);

    background-position: 
        // 顶部左、中、右
        left top, $l_w top, right top,
        // 中间层左、中、 右
        left $t_h, $l_w $t_h, right $t_h,
         // 底部左、中、右
        left bottom, $l_w bottom, right bottom;

    background-size: 
        // 顶部左、中、右
        $l_w $t_h, calc(100% - #{$l_w} - #{$r_w}) $t_h, $r_w $t_h,
        // 中间层左、 中、右
        $l_w calc(100% - #{$t_h} - #{$b_h}), calc(100% - #{$l_w} - #{$r_w}) calc(100% - #{$t_h} - #{$b_h}), $r_w calc(100% - #{$t_h} - #{$b_h}),
        // 底部左、中、右
        $l_w $b_h, calc(100% - #{$l_w} - #{$r_w}) $b_h, $r_w $b_h;
}

最后我们来看看实现的效果吧：

最小宽高样式