小提示
  • Ctrl+/代码提示(需IE11)
  • F11键放大 ESC键缩小
  • PgUp上页 PgDn下页
推荐代码
运行代码 缩小
    • 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
    • 1.7.3 1.7.2 1.7.1.0 1.7.0.0
    • 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
    • 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
    • 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
    • core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
    • 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
    • 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6
    • 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
    • 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
    • 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>颜色遮罩</title>
5
</head>
6
<body>
7
  <svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
8
  <defs>
9
    <filter id="blurry" x="-20%" y="-20%" height="140%" width="140%" primitiveUnits="userSpaceOnUse">
10
      <feImage x="0" y="0" width="500" height="500" xlink:href="#squares" result="mySquares"/>
11
      <feGaussianBlur stdDeviation="40" in="mySquares" result="blurSquares"/>
12
      <feComponentTransfer in="blurSquares" result="morealpha">
13
        <feFuncA type="linear" intercept=".8"/>
14
      </feComponentTransfer>
15
      <feComposite operator="in" in="morealpha" in2="SourceGraphic" result="clipBlur"/>
16
      <feFlood x="10%" y="10%" width="80%" height="80%" flood-color="white" flood-opacity="0.6" result="whitesquare"/>
17
      <feBlend mode="screen" in="clipBlur" in2="whitesquare" result="final"/>
18
    </filter>
19
  </defs>
20
  <g id="squares">
21
    <rect x="10" y="10" height="235" width="235" fill="red" />
22
    <rect x="255" y="10" height="235" width="235" fill="green" />
23
    <rect x="10" y="255" height="235" width="235" fill="blue" />
24
    <rect x="255" y="255" height="235" width="235" fill="yellow" />
25
  </g>
26
    <rect filter="url(#blurry)" x="50" y="50" height="400" width="400"/>
27
</svg>
28
</body>
29
</html>
CSS代码
复制 格式化 注释 注释 颜色 清空
放大 
CSS代码...
​x
 
1
​
JS代码
复制 格式化 注释 注释 清空
放大 
JS代码...
xxxxxxxxxx
1
 
1
​
运行代码

简介

名称
HTML模糊的颜色遮罩效果
分类
网站常用
描述
HTML模糊的颜色遮罩效果，好像是HTML5中的内容，运行效果后你可以看到最上面的方块遮挡了下边的四个彩色方块，从上面的方块层可以看到下面大致的轮廓，不过已经被上面的模糊化了，用了Fliter滤镜效果，仔细看下代码，还真量不太熟悉这种...
收藏