<style type="text/css">
#blur-image{
display:block;
width:700px;
height:800px;
margin:0 auto;
filter: blur(30px);
/*10个filter的属性*/
-webkit-filter: blur(30px);/*模糊的效果*/
-webkit-filter:grayscale(1);/*黑白 默认100%*/
-webkit-filter:sepia(1);/*黄棕色类似老照片 默认100%*/
-webkit-filter:saturate(3)/*饱和度 默认100%*/;
-webkit-filter:hue-rotate(90deg)/*色轮默认是0deg*/;
-webkit-filter:invert(1);/*默认100%*/
-webkit-filter:opacity(0.2)/*默认100%，不透明的程度*/;
-webkit-filter: brightness(0.5)/*亮度，默认100%*/;
-webkit-filter:contrast(2);/*对比度，默认100%和原图一样*/
-webkit-filter:drop-shadow(10px 10px 2px #aaa);/*（阴影向右，阴影向下，阴影的模糊程度，阴影的颜色）*/
}
</style>
<body>
<img src="img/ee.jpg" id="blur-image" />
</body>
#blur-image{
display:block;
width:700px;
height:800px;
margin:0 auto;
filter: blur(30px);
/*10个filter的属性*/
-webkit-filter: blur(30px);/*模糊的效果*/
-webkit-filter:grayscale(1);/*黑白 默认100%*/
-webkit-filter:sepia(1);/*黄棕色类似老照片 默认100%*/
-webkit-filter:saturate(3)/*饱和度 默认100%*/;
-webkit-filter:hue-rotate(90deg)/*色轮默认是0deg*/;
-webkit-filter:invert(1);/*默认100%*/
-webkit-filter:opacity(0.2)/*默认100%，不透明的程度*/;
-webkit-filter: brightness(0.5)/*亮度，默认100%*/;
-webkit-filter:contrast(2);/*对比度，默认100%和原图一样*/
-webkit-filter:drop-shadow(10px 10px 2px #aaa);/*（阴影向右，阴影向下，阴影的模糊程度，阴影的颜色）*/
}
</style>
<body>
<img src="img/ee.jpg" id="blur-image" />
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
