10个filter的属性

来源:互联网 发布:摄影美工 编辑:程序博客网 时间:2024/05/20 07:32
<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>
0 0
原创粉丝点击