css3毛玻璃效果白边问题
2024-08-28 14:14:35
注: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" /> 原理很简单就是在要模糊的图片下面在定位一张相同的图片,当要模糊的图片缩小时,就会显示出低下的那张图。。。白边就不见了,哈哈哈。。。你想到了吗?
最新文章
- ASP.NET Core Web API Cassandra CRUD 操作
- Docking Windows Phone controls to the bottom of a StackPanel
- 刷新本地的DNS缓存数据
- javascirpt对象运用与JS变量
- ubuntu用apt安装apache2时,出现E:未发现软件包 apache2
- SQLSERVER2014中的新功能
- Tomcat如何设置网站的默认首页
- jsrender-for循环中访问父属性
- SQL将金额转换为汉子
- codeforces 707D-(DFS+bitset)
- 百度oauth2.0 WEB 链接
- 1、发布C++实现的TCP网络框架Khala
- html学习 - 自己主动跳转与自己主动刷新
- 游戏排行榜-Python实现
- Thinkphp中使用Redis
- 前端双引号单引号,正则反向引用,js比较jq
- adb server version (31) doesn&#39;t match this client (40); killing...
- Archlinux/Manjaro使用笔记-报错:一个或多个 PGP 签名无法校验!的解决方法
- Web应用程序使用说明
- python scrapy cookies 处理