?

如果閣下想玩進(jìn)階版的背景圖樣式請(qǐng)移步【進(jìn)階版九宮格背景圖片】如何僅僅依靠background的幾個(gè)屬性組合搭配出酷炫的背景圖片效果，并自適應(yīng)任何寬高效果？_你摯愛的強(qiáng)哥?給你發(fā)來1條消息?-CSDN博客?

實(shí)現(xiàn)如圖效果的背景圖

?

將背景切片為head、body、foot三個(gè)png

head.png高度73px

body.png高度1px

foot.png高度69px

    /*背景圖片*/background: url(~@/assets/head.png) no-repeat centertop/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;

總結(jié)

以上是生活随笔為你收集整理的【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式，多用于异形弹窗背景图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。