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

标题: backdrop-filter用法示例 [打印本页]
作者: 洪七公    时间: 2023-6-1 09:03
标题: backdrop-filter用法示例

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

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

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

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

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

  22. /* 全局值 */
  23. backdrop-filter: inherit;
  24. backdrop-filter: initial;
  25. backdrop-filter: revert;
  26. 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>  

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

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

  20. <url> =
  21.   url( <string> <url-modifier>* )  |
  22.   src( <string> <url-modifier>* )  

  24. <blur()> =
  25.   blur( <length>? )  

  27. <brightness()> =
  28.   brightness( [ <number> | <percentage> ]? )  

  30. <contrast()> =
  31.   contrast( [ <number> | <percentage> ]? )  

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

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

  39. <hue-rotate()> =
  40.   hue-rotate( [ <angle> | <zero> ]? )  

  42. <invert()> =
  43.   invert( [ <number> | <percentage> ]? )  

  45. <opacity()> =
  46.   opacity( [ <number> | <percentage> ]? )  

  48. <sepia()> =
  49.   sepia( [ <number> | <percentage> ]? )  

  51. <saturate()> =
  52.   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. }

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

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

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

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







欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3