【横向或纵向不规则背景图支持伸缩、缩放】一句CSS3代码实现不规则自定义背景图拼接样式，多用于异形弹窗背景图

实现如图效果的背景图（垂直方向平铺）

 

将背景切片为head、body、foot三个png

head.png高度73px

body.png高度1px

foot.png高度69px

/*背景图片*/
background: url(~@/assets/head.png) no-repeat center top/100% 73px,
url(~@/assets/body.png) no-repeat center 73px/100% calc(100% - 73px - 69px),
url(~@/assets/foot.png) no-repeat center bottom/100% 69px;

---

实现如图效果的背景图（水平方向平铺）

将背景切片为left、mid、right三个png

其中
left.png（宽度20px） 
mid.png（宽度1px）
right.png（宽度265px）

/*背景图片*/
background: url(~@/assets/left.png) no-repeat left center / 20px 100%,
url(~@/assets/mid.png) no-repeat 20px center / calc(100% - 20px - 265px) 100%,
url(~@/assets/right.png) no-repeat right center/265px 100%;

如果阁下想玩进阶版的背景图样式请移步

【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面_前端大屏背景图-CSDN博客文章浏览阅读6k次。这是我们最终想要达到的效果，并且支持任意宽高缩放不变形。注意哟这次不一样的是有透明度！开始准备物料第一步：切片，建议用九宫格的形式，切割有考究，主要是最大限度、最小尺寸囊括多个边界转角处的样式(亮蓝色是参考线，白色文字是描述区域规则，红色文字是宽高、分割输出的png图片文件名，正中的宫格就用1像素宽高png背景图拉伸[注意是拉伸不是平铺！])第二步：输出文件（一共是9个png文件：lt、mt、rt、lm、mm、rm、lb、mb、rb.png），需要注意小细节，我的每张图片..._前端大屏背景图https://blog.csdn.net/qq_37860634/article/details/119591991【进阶版九宫格背景图片】如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果，并自适应任何宽高效果？_ui 九宫格背景配色-CSDN博客文章浏览阅读5.3k次。如果你要有透明度效果的背景图请移步【透明版九宫格背景图片】仅依靠background的几个属性组合搭配出酷炫的透明背景卡片效果→适用于大数据可视化、数据大屏展示页面_前端大屏背景图-CSDN博客文章浏览阅读6k次。这是我们最终想要达到的效果，并且支持任意宽高缩放不变形。注意哟这次不一样的是有透明度！_ui 九宫格背景配色https://blog.csdn.net/qq_37860634/article/details/119523761