登录

css3图片模糊,svg图片模糊

我来纠错
-webkit-filter: blur(2px); /* Chrome, Opera ,里面2px就是羽化像素2px。*/
-ms-filter: blur(2px);    /* Internet Explorer 9+*/
filter: blur(2px);  /* 火狐*/
    
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); /* IE6~IE9 */}
 
//SVG图片模糊
 .css{	filter: url(../images/blur.svg#blur); /* FireFox, Chrome, Opera,调用svg文件里面得id="blur"或者id="blur2"的参数设置,svg文件在下面有说明。*/
以下是svg文件代码,把代码粘贴在txt文档里面,后缀名改为svg,css里面即可调用这个文件。文件里面2个id就是对应得参数设置,stdDeviation="2"就是模糊羽化2px:
    
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--Scalable Vector Graphic-->
<svg version="1.1" 
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"     
baseProfile="full">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="2" ></feGaussianBlur>
    </filter>
    <filter id="blur2">
      <feGaussianBlur stdDeviation="0" ></feGaussianBlur>
    </filter>
  </defs>
</svg>
                    
发送
热门关键词:
命令
知识类型:
标题描述:
详细解答:

提交审核您编辑的知识会经过 前端大牛 人工审核。