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

简介: 【最简洁】一句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;


相关文章
|
1月前
|
前端开发
CSS——@layer规则
CSS——@layer规则
35 2
CSS——@layer规则
|
2天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
17 1
|
15天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
10天前
|
前端开发
css <样式一>
css <样式一>
14 1
|
1月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
38 1
简单几行代码CSS实现网页自动打文字效果
|
1月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
26天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
34 6
|
27天前
|
前端开发
CSS样式规则
CSS样式规则。
23 2
|
4天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
10 0
|
1月前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例