首页 > 其他分享 >css使用上中下三种图设置背景图,上下两张高度位置固定,中间拉伸(background-size、background-position、backdrop-filter)

css使用上中下三种图设置背景图,上下两张高度位置固定,中间拉伸(background-size、background-position、backdrop-filter)

时间:2024-09-23 15:25:39浏览次数:7  
标签:center 高度 100% background filter 5px backdrop 图片

注意:此处计算需要使用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

相关文章

  • Filter 过滤器和 Listener 监听器
    2、开发步骤3、过滤器执行流程4、过滤器生命周期5、过滤器配置问题6、过滤器链(配置多个过滤器)二、Listener监听器1、ServletContextListener接口2、开发步骤一、Filter过滤器============1、概述当访问服务器资源时,Filter过滤器可以将请求拦截下来,完成一些特殊的......
  • CSS background背景设置无效
    在CSS中使用背景图片时,路径的正确性很重要。如果你在路径中使用了斜杠(/),可能会导致路径解析出现问题。以下是一些可能的原因和解决方案:路径解析:./ 表示相对当前文件的路径。如果你的CSS文件和图片的相对位置是正确的,使用 ./ 是没有问题的。/ 表示根目录的路径,如果......
  • 如何在 ASP.NET Core Web API 方法执行前后 “偷偷“ 作一些 “坏“ 事?初识 ActionFil
    前言:什么是ActionFilterAttribute?ActionFilterAttribute是一种作用于控制器Action方法的特性(Attribute),通过它,你可以在操作执行前后、异常处理时等不同的阶段插入自定义逻辑。比如在执行操作方法之前修改请求参数、记录日志、进行权限验证等操作,在执行操作方法之后发送邮件......
  • 过滤器Filter 与 拦截器Interceptor
    1.Filter过滤器1.1什么是Filter?Filter表示过滤器,是JavaWeb三大组件(Servlet、Filter、Listener)之一。过滤器可以把对资源的请求拦截下来,从而实现一些特殊的功能使用了过滤器之后,要想访问web服务器上的资源,必须先经过滤器,过滤器处理完毕之后,才可以访问对应的资源。......
  • 完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
    完美解决Array方法(map/filter/reduce)不按预期工作的正确解决方法,亲测有效!!!亲测有效完美解决Array方法(map/filter/reduce)不按预期工作的正确解决方法,亲测有效!!!报错问题可能出现的原因解决思路解决方法1.确保回调函数正确返回值2.检查数组的数据类型3.使......
  • Rocksdb Background Error 处理
    错误严重性等级:Status::Severity::kSoftError -ErrorsofthisseveritydonotpreventwritestotheDB,butitdoesmeanthattheDBisinadegradedmode.Backgroundcompactionsandflushmaynotbeabletoruninatimelymanner.Status::Severity::kHardErr......
  • 文件包含_PHP filter伪协议利用方式
    前言本文主要讲解phpfilter伪协议,文件包含漏洞php://filter伪协议是PHP中独有的一种协议,它是一种过滤器,可以作为一个中间流来过滤其他的数据流。通常使用该协议来读取或者写入部分数据,且在读取和写入之前对数据进行一些过滤,例如base64编码处理、rot13处理等。php://filter伪协......
  • OpenCV(cv::bilateralFilter())
    目录1.函数定义2.双边滤波的工作原理3.应用场景4.示例5.与其他滤波器的比较6.性能优化7.注意事项结论cv::bilateralFilter()是OpenCV中用于图像平滑处理。与传统的线性滤波器(如高斯滤波器)不同,它同时考虑空间邻近性和像素值相似性,从而保留边缘的细节。1.函数定义vo......
  • 过滤器(Filter)
    Filter概述概念:Filter过滤器,是JavaWeb三大组件(Servlet、Filter、Listener)之一。过滤器可以把对资源的请求拦截拦截下来,从而实现一些特殊的功能。过滤器一般完成一些通用的操作,比如:登录校验、统一编码处理、敏感字符处理等。Filter快速入门定义Filter:定义一个类,实......
  • 十三,Spring Boot 中注入 Servlet,Filter,Listener
    十三,SpringBoot中注入Servlet,Filter,Listener@目录十三,SpringBoot中注入Servlet,Filter,Listener1.基本介绍2.第一种方式:使用注解方式注入:Servlet,Filter,Listener2.1使用注解方式注入:Servlet2.2使用注解方式注入:Filter2.3使用注解方式注入:Listener3.第二种方式:使用Regis......