如果你要有透明度效果的背景圖請移步https://blog.csdn.net/qq_37860634/article/details/119591991

這是我們最終想要達到的效果，并且支持任意寬高縮放不變形。

有些UI設計師（說的就是我）喜歡搞這種帶有一絲絲機械、科技、未來感的線框，兼職前端開發的我真的很討厭醬紫的設計也（太虛偽了~）

開始準備物料

第一步：切片，建議用九宮格的形式，切割有考究，主要是最大限度、最小尺寸囊括多個邊界轉角處的樣式(亮藍色是參考線，白色文字是描述區域規則，紅色文字是寬高、分割輸出的png圖片文件名，正中的宮格就用背景色純色)

第二步：輸出文件（一共是8個png文件：lt、mt、rt、lm、rm、lb、mb、rb.png），需要注意小細節，我的每張圖片都做了線性漸變，只為讓邊角和背景色更加融合（不要出現戛然而止的斷層、不銜接、low逼效果：不懂什么是low逼效果看最后的那張圖~~~）

?

?第三步：定義樣式（如果嫌棄我的代碼太多，可以無腦照搬直接拷貝代碼，只要嚴格按照上圖的切片命名規則，適當修改下變量$l_w、$r_w、$t_h、$b_h的像素值就可以搞定了）

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

// 酷炫卡片背景************************************************
.sg-card {// 公共變量定義----------------------------------------$card-bg: "~@/assets/common/sg-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;//背景色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}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, 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}), $r_w calc(100% - #{$t_h} - #{$b_h}),// 底部左、中、右$l_w $b_h, calc(100% - #{$l_w} - #{$r_w}) $b_h, $r_w $b_h;// ----------------------------------------
}

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

最小寬高樣式

寬度400px高度300px

寬度900px高度400px

?怎么樣滿足你大數據展示各種需求了吧？自由適配各種寬高

---

這就是low逼效果圖

總結

以上是生活随笔為你收集整理的【进阶版九宫格背景图片】如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果，并自适应任何宽高效果？的全部內容，希望文章能夠幫你解決所遇到的問題。

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