?這是我們最終想要達到的效果，并且支持任意寬高縮放不變形。注意喲這次不一樣的是有透明度！

?開始準備物料

第一步：切片，建議用九宮格的形式，切割有考究，主要是最大限度、最小尺寸囊括多個邊界轉角處的樣式(亮藍色是參考線，白色文字是描述區域規則，紅色文字是寬高、分割輸出的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;
}

最后我們來看看實現的效果吧：

最小寬高樣式

寬度600px高度450px

寬度900px高度400px

?怎么樣滿足你大數據展示各種需求了吧？一種淡淡的透明效果，更有視覺感、通透性！

總結

以上是生活随笔為你收集整理的【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。