源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 2225|回复: 0

[CSS/Html] backdrop-filter用法示例

[复制链接]

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
发表于 2023-6-1 09:03:07 | 显示全部楼层 |阅读模式

简单的说,backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。

  1. /* 关键词值 */
  2. backdrop-filter: none;

  3. /* 指向 SVG 滤镜的 URL */
  4. backdrop-filter: url(commonfilters.svg#filter);

  5. /* <filter-function> 滤镜函数值 */
  6. backdrop-filter: blur(2px);
  7. backdrop-filter: brightness(60%);
  8. backdrop-filter: contrast(40%);
  9. backdrop-filter: drop-shadow(4px 4px 10px blue);
  10. backdrop-filter: grayscale(30%);
  11. backdrop-filter: hue-rotate(120deg);
  12. backdrop-filter: invert(70%);
  13. backdrop-filter: opacity(20%);
  14. backdrop-filter: sepia(90%);
  15. backdrop-filter: saturate(80%);

  16. /* 多重滤镜 */
  17. backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

  18. /* 全局值 */
  19. backdrop-filter: inherit;
  20. backdrop-filter: initial;
  21. backdrop-filter: revert;
  22. backdrop-filter: unset;
复制代码

语法

none
没有应用于背景的滤镜。

<filter-function-list>

一个以空格分隔的滤镜函数(<filter-function>)或是要应用到背景上的 SVG 滤镜。

形式化定义

初始值        none

适用元素        all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements

初始值        none

适用元素        all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements

是否是继承属性        否

计算值        as specified

Animation type        a filter function list

形式化语法

  1. backdrop-filter =
  2.   none                 |
  3.   <filter-value-list>  

  4. <filter-value-list> =
  5.   [ <filter-function> | <url> ]+  

  6. <filter-function> =
  7.   <blur()>         |
  8.   <brightness()>   |
  9.   <contrast()>     |
  10.   <drop-shadow()>  |
  11.   <grayscale()>    |
  12.   <hue-rotate()>   |
  13.   <invert()>       |
  14.   <opacity()>      |
  15.   <sepia()>        |
  16.   <saturate()>     

  17. <url> =
  18.   url( <string> <url-modifier>* )  |
  19.   src( <string> <url-modifier>* )  

  20. <blur()> =
  21.   blur( <length>? )  

  22. <brightness()> =
  23.   brightness( [ <number> | <percentage> ]? )  

  24. <contrast()> =
  25.   contrast( [ <number> | <percentage> ]? )  

  26. <drop-shadow()> =
  27.   drop-shadow( [ <color>? && <length>{2,3} ] )  

  28. <grayscale()> =
  29.   grayscale( [ <number> | <percentage> ]? )  

  30. <hue-rotate()> =
  31.   hue-rotate( [ <angle> | <zero> ]? )  

  32. <invert()> =
  33.   invert( [ <number> | <percentage> ]? )  

  34. <opacity()> =
  35.   opacity( [ <number> | <percentage> ]? )  

  36. <sepia()> =
  37.   sepia( [ <number> | <percentage> ]? )  

  38. <saturate()> =
  39.   saturate( [ <number> | <percentage> ]? )  
复制代码


示例

CSS

  1. .box {
  2.   background-color: rgba(255, 255, 255, 0.3);
  3.   border-radius: 5px;
  4.   font-family: sans-serif;
  5.   text-align: center;
  6.   line-height: 1;
  7. -webkit-backdrop-filter: blur(10px);
  8.   backdrop-filter: blur(10px);
  9.   max-width: 50%;
  10.   max-height: 50%;
  11.   padding: 20px 40px;
  12. }

  13. html,
  14. body {
  15.   height: 100%;
  16.   width: 100%;
  17. }

  18. body {
  19.   background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  20.   background-position: center center;
  21.   background-repeat: no-repeat;
  22.   background-size: cover;
  23. }

  24. .container {
  25.   align-items: center;
  26.   display: flex;
  27.   justify-content: center;
  28.   height: 100%;
  29.   width: 100%;
  30. }
复制代码

HTML
  1. <div class="container">
  2.   <div class="box">
  3.     <p>backdrop-filter: blur(10px)</p>
  4.   </div>
  5. </div>
复制代码



您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-10-13 12:11 , Processed in 0.152976 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明