【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图

阅读 127

2022-12-22


实现如图效果的背景图

 

【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图_css3

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

【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图_背景图片_02

head.png高度73px

【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图_css3_03

body.png高度1px

【最简洁】一句CSS3代码实现不规则自定义背景图拼接样式,多用于异形弹窗背景图_css3_04

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;

精彩评论(0)

0 0 举报