css3毛玻璃效果白边问题_html/css_WEB-ITnose
程序员文章站
2022-04-26 08:02:58
...
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧!
1、毛玻璃实现方法:
CSS3 blur滤镜实现
如下测试代码:
.blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }
相关HTML代码如下:
需要注意目前火狐不支持,其他些浏览器,如FireFox到目前还没有支持CSS3 filter. 当然,要实现(比方说)FireFox 24浏览器上照片变模糊的效果,也是可以的。可以使用SVG的模糊滤镜。
新建文命名为blur.svg的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代码如下:
原理很简单就是在要模糊的图片下面在定位一张相同的图片,当要模糊的图片缩小时,就会显示出低下的那张图。。。白边就不见了,哈哈哈。。。你想到了吗?
推荐阅读
-
CSS3毛玻璃效果(blur)有白边问题的解决方法
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
css3过度效果_html/css_WEB-ITnose
-
css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose
-
学习使用 CSS3 制作网站面包屑导航效果_html/css_WEB-ITnose
-
CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose
-
balloon.css-纯CSS3简单实用的tooltips工具提示效果库_html/css_WEB-ITnose
-
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose
-
胡博君谈CSS3中的边框的各种效果_html/css_WEB-ITnose