注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧!

1、毛玻璃实现方法:

CSS3 blur滤镜实现
如下测试代码:

.blur {
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}

相关HTML代码如下:

<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />
 

需要注意目前火狐不支持,其他些浏览器,如FireFox到目前还没有支持CSS3 filter. 当然,要实现(比方说)FireFox 24浏览器上照片变模糊的效果,也是可以的。可以使用SVG的模糊滤镜。
新建文命名为blur.svg的SVG文件:

<?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">
<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="10" />
</filter>
</defs>
</svg>

如下CSS调用代码:

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

完整的css代码

.blur {
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
} 2、解决白边方式 相关HTML代码如下:
<img src="mm1.jpg" />
<img src="mm1.jpg" />

原理很简单就是在要模糊的图片下面在定位一张相同的图片,当要模糊的图片缩小时,就会显示出低下的那张图。。。白边就不见了,哈哈哈。。。你想到了吗?

css3毛玻璃效果白边问题的更多相关文章

  1. 解决css3毛玻璃效果(blur)有白边问题

    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...

  2. CSS3 之filter毛玻璃效果弹窗

    先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  3. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  4. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

  5. 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  6. 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

    转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...

  7. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  8. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  9. 《CSS揭秘》之毛玻璃效果知识点

    实现代码: CodePen:毛玻璃效果 Dabblet:毛玻璃效果 HTML: <main> <blockquote> <em>"The only way ...

随机推荐

  1. Postgres数据库在Linux中优化

    I/O 优化1 打开 noatime nodirtime,async 方法: 修改 /etc/fstab stat 命令查看 2 调整预读方法: 查看 sudo blockdev --getra /d ...

  2. Replication--发布属性immediate_sync

    在创建发布时,如果选择立即初始化,会将immediate_sync属性设置为true.如果immediate_sync属性为true时,snapshot文件和发布事务及发布命令将一直保留到指定的事务保 ...

  3. uwsgi启动Django项目时:unable to load app 0 (mountpoint='') (callable not found or import error) *** no app loaded. going in full dynamic mode ***

    说起来有点坑 用命令都能正常启动,但是用配置文件就是不行 提示 unable to load app (mountpoint='') (callable not found or import err ...

  4. 解决SqlServer 2005 sa帐户不能登录问题

    允许 sa 用户远程是很危险的.推荐的做法是在本地新建一个允许远程连接的用户. 1.启用TCP/IP协议. 2.配置监听端口(1433). net -an 检查本地端口是否建立监听,使用 在线IP端口 ...

  5. Major Performance Impacts

    - Default opaque flags (3s) - Filter size (3s) - ??? (4s) - Image refresh performance (1s)

  6. Windows上编译OpenShadingLanguage

    将OSL 1.3.0解压到[工作目录]/osl/OpenShadingLanguage 对Debug使用如下bat生成项目文件: @Echo off cd OpenShadingLanguage se ...

  7. mongodb 连接字符串

    mongodb 连接字符串 <!--连接字符串--> <add key="ts.students" value="mongodb://192.168.0 ...

  8. linux下的常用指令

    1,在vim中查找字符段 :1?字段名,此方式可以从开始向下查询字段了. :?字段名 ,查询字都段: 2,修改某个文件夹用户和组 修改文件所属用户:chown [-R] 用户 文件或目录 如:chow ...

  9. [ActionScript 3.0] 动态链接库

    很多时候,我们为了项目和程序结构更加清晰,需要将发布好的swf放到一个固定的地方供主文件引用,这时就会出现发布好的swf所用的as类路径发生改变,为避免这个问题,需要用到动态链接库,以下做一个简单例子 ...

  10. 7,CountDownLatch 与 CyclicBarrier 的 区别

    CountDownLatch : 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDo ...