最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css3毛玻璃效果(blur)有白边怎么办
时间:2016-11-15 编辑:简简单单 来源:一聚教程网
overflow: hidden;
}
/* IE6~IE9 */
filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=100, MakeShadow=false);
-webkit-filter: blur(100px);
-moz-filter: blur(100px);
-ms-filter: blur(100px);
filter: blur(100px);
background-image: url(../../../img/background/home-bg-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
position: absolute;
z-index: 1;
}
background-color: rgba(255, 255, 255, 0.5);
display: block;
border: 1px solid rgba(183, 183, 183, 0.47);
border-radius: 6px;
position: absolute;
left: 50%;
margin-right: auto;
margin-left: -150px;
margin-top: 10%;
z-index: 2;
}
background-image: url(../../../img/background/home-bg-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
background-blend-mode: darken;
补充:css3毛玻璃效果(blur)有白边
完整的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、解决白边方式
原理很简单就是在要模糊的图片下面在定位一张相同的图片,当要模糊的图片缩小时,就会显示出低下的那张图。。。白边就不见了,哈哈哈。。。你想到了吗?
css样式兼容各种浏览器的 毛玻璃效果解
-webkit就是针对,webkit核心浏览器的,典型CHROME,Safari
-moz是Mozilla核心,典型,火狐
-o-, -xv-,典型OPERA
-ms,一看就知道是微软了,一般省略
你加上其它厂商的标头试试,有部分不支持这属性,
用CSS怎给字体加白边
用text-shadow此属性用来设计字体的投影效果,不过IE不支持,不过CSS3.0就可以支持,以后也就可以显示了。text-shadow:的设置是这样:text-shadow:1PX 1PX 1PX #FFFFFF。。第一个数值是X轴方向,第二个数值是Y轴方向,第三数值是投影后的模糊度越大越模糊,第四个是投影后的颜色色值
-
上一个: css防止表格被内容撑破的方法
-
下一个: css中清除浮动的例子
相关文章
- 用CSS3来实现逐渐发光的方格边框 05-17
- CSS3背景下的@font face有什么规则 05-06
- 详解CSS3中nth-child与nth-of-type的区别 01-10
- CSS3,线性渐变(linear-gradient)的使用总结 01-10
- CSS3动画特效制作教程 好看的CSS3动画特效 01-04
- CSS3 Flexbox属性用法大全 CSS3 Flexbox各种属性详解 01-04