注意:此处计算需要使用calc,less的减法是在编译阶段不满足此处需求
上下两张图高度为5px,位置紧贴上下边缘,中间背景图根据高度拉伸,并且增加模糊度
background:
url('./images/top.png') no-repeat, /* 顶部图片 */
url('./images/bottom.png') no-repeat, /* 底部图片 */
url('./images/center.png') no-repeat; /* 中间图片 */
background-size:
100% 5px, /* 顶部图片固定高度 */
100% 5px, /* 底部图片固定高度 */
100% calc(100% - 10px); /* 中间图片的高度填充剩余部分 */
background-position:
center top, /* 顶部图片 */
center bottom, /* 底部图片 */
center 5px; /* 中间图片从顶部 5px 开始 */
backdrop-filter: blur(2px);
padding: 5px 0;
box-sizing: border-box;
标签:center,高度,100%,background,filter,5px,backdrop,图片 From: https://www.cnblogs.com/Simoon/p/18427123