CSS基本功先生——滤镜

最新推荐文章于 2024-04-20 16:25:04 发布

孟海滨

最新推荐文章于 2024-04-20 16:25:04 发布

阅读量1.2k

点赞数

分类专栏： CSS学习文章标签： css

本文链接：https://blog.csdn.net/lovemenghaibin/article/details/42045247

版权

CSS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上一篇博客将的事基本的用法，这篇博客咱们讲一下CSS中的滤镜和图片处理。打开网页的时候，尤其是一些公司的官网的时候，首页总是坐的非常的绚烂，以前以为那都是一些flash或者好多图片组合的，现在学习了CSS滤镜，我想看完下边，大家也能做出一些非常绚烂的页面了。

CSS滤镜并不是浏览器的插件,也不符合CSS标准，而是微软公司为增强浏览功能而特意开发的并整合在IE浏览器中的一类功能的集合由于浏览器有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱，CSS滤镜的标识符是filter体上跟其它CSS语句一样，都十分简单。

一、滤镜属性

其实滤镜就是一个简单的透明度，但是就是这么一个简单的透明度，却因为他的效果非常的好，所以应用的频率非常的高。

1、Alpha通道

.alpha{
      filter:alpha(opacity=50)     //表示透明度为50%
}

2、Blur(模糊)

<span style="font-size:14px;">.blur{
     filter:progid:DXImageTransform.Morcrosoft.blur(pixelradius=4,makeshadow=false);
}</span>

3、透明色

.chorma{
      filter:chromalcolor=FF6800;
}

4、翻转

.flip1{
     filter:fliph;   /*水平翻转*/ 
}
.flip3{
     filter:flipv;   /*竖直翻转*/ 
}
.flip3{
     filter:flipv fliph;   /*水平竖直同时翻转*/ 
}

2、滤镜应用

水中倒影大家想必见过吧，非常的好看，那么今天我们就用一个这个滤镜实现一下咱们的水中的滤镜

<html>
<head>
<title>三个滤镜同时使用</title>
<style>
<!--
body{
	margin:12px;
	background:#000000;
}
.three{
	filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);
	/* 同时使用三个滤镜 */
	/* 竖直翻转、透明、波浪效果 */
}
-->
</style>
   </head>
<body>
	<img src="lotus.jpg"><br>
	<img src="lotus.jpg" class="three">
</body>
</html>

看上去是不是很漂亮，就是几个简单的属性，就能实现Photoshop的功能，而且还可以根据我们的要求来改变。

3、总结

当然在ID里边他用的是filter，但是在非IE浏览器中，用的是opacity，而且他的值在0~1之间，具体的写法就不再这里了，只是需要把filter:alpha(opacity=60)改成opacity=0.6就可以。虽然这个滤镜的功能非常强大，但是不是说PhotoShop不行了，二者各有利弊，Photoshop还是可以为为咱们制定图片的。