精通CSS+DIV网页样式与布局--滤镜的使用

简介:         在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来说说滤镜的使用,首先,小编来简单的介绍一下滤镜的概念,CSS滤镜并不是浏览器的插件,也不符合CSS标准,二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。

        在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来说说滤镜的使用,首先,小编来简单的介绍一下滤镜的概念,CSS滤镜并不是浏览器的插件,也不符合CSS标准,二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。由于浏览器IE有着很广的使用范围,因此CSS滤镜也被广大设计者所喜爱。CSS滤镜的标识是“filter”,总体上跟其他CSS语句一样,都十分简单,紧接着,我们来看一张思维导图:

       

       接着,小编就随着上述思维导图的脉络,依次简单介绍,首先我们来看看Alpha通道,我们来看例子代码和运行效果:

      Alpha通道

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>alpha滤镜</title>
<style>
<!--
body{
	background:url(bg1.jpg);
	margin:20px;
}
img{
	border:1px solid #d58000;
}
.alpha{
	filter:alpha(opacity=50);
}
-->
</style>
   </head>
<body>
<img src="building1.jpg" border="0">  
<img src="building1.jpg" border="0" class="alpha">
</body>
</html></span></span>

        运行效果如下所示:

        

        分析一下上面的代码,第二幅图片相对于第一副图片来说,具有的夜晚效果更加强烈,我们看CSS代码:这里我们把filter:alpha(opacity=20);当然大家可以自己来设置不同的值,来看显示效果。我们接着看blur模糊,我们不用photoshop也能制造出模糊的效果。我们来看例子代码和运行效果:   

        Blur模糊

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>Blur滤镜</title>
<style>
<!--
body{
	margin:10px;
}
.blur{
	filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);
}
-->
</style>
   </head>
<body>
<img src="building9.jpg"> 
<img src="building9.jpg" class="blur">
</body>
</html></span></span>
       运行效果如下所示:

       
       我们来分析一下上面的例子,对比两幅图,第二幅用了class=“blur”,我们看到这句话filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);这里我们将模糊的效果
pixelradius设置为不同的值,则可以看到不同的模糊效果,小伙伴们可以自己动手来试一下。我们接下来看透明色滤镜,我们来看例子代码和运行效果:

        透明色

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>chroma滤镜</title>
<style>
<!--
body{
	margin:10px;
}
.chroma{
	filter:chroma(color=FF6800);		/* 去掉金黄色 */
}
-->
</style>
   </head>
<body>
 <img src="tiger.gif">  
<img src="tiger.gif" class="chroma">
</body>
</html></span></span>
        运行效果如下:

        
       分析一下上面的例子,我们很清楚的看到,老虎身上的金黄色进行了过滤,我们看这句话:filter:chroma(color=FF6800);就是把金黄色去掉。我们继续看flip翻转滤镜。CSS可以在不处理图片的环境下,对图片进行翻转,看下面的例子代码和运行效果:

        Flip翻转

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>Flip翻转</title>
<style>
<!--
body{
	margin:12px;
	background:#000000;
}
.flip1{
	filter:fliph;	/* 水平翻转 */
}
.flip2{
	filter:flipv;	/* 竖直翻转 */
}
.flip3{
	filter:flipv fliph;	/* 水平、竖直同时翻转 */
}
-->
</style>
   </head>
<body>
<img src="building4.jpg"><img src="building4.jpg" class="flip1"><br>
<img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3">
</body>
</html></span></span>

       运行效果如下:

        
       分析一下上面的例子,这里其实是四幅图片,第一幅(左上角),原片;第二幅进行了水平的映像,第三幅进行了竖直方向的镜像;而右下角同时进行了水平和竖直方向的映像。我们看一下代码:我们从代码中也看的出来,flip1进行了水平翻转,我们继续看遮罩,photoshop里边有强大的遮罩功能,我们来看例子代码和运行效果:

        遮罩

<span style="font-size:18px;"><html>
<head>
<title>Mask遮罩</title>
<style>
<!--
body{
	margin:12px;
	background:#000000;
}
.mask{
	filter:mask(color=#FF0000);	/* 遮罩效果 */
}
-->
</style>
   </head>
<body>
	<img src="muma.gif"> 
	<img src="muma.gif" class="mask">
</body>
</html></span>


        运行效果如下所示:

        
        分析一下上面的例子,我们看到第二第二幅图,有点像影子变幻的效果,我们看一下CSS代码,我们的代码中,第一幅图片没有做处理,第二幅图片进行了mask处理。我们看这句话:filter:mask(color=RED);这里是显示需要遮罩的颜色。我们继续看最好一个滤镜,波浪滤镜,我们经常采用photoshop来实现波浪效果,css也可以,我们看一下例子代码和运行效果:

<span style="font-size:18px;"><html>
<head>
<title>Wave波浪滤镜</title>
<style>
<!--
body{
	margin:12px;
	background-color:#e4f1ff;
}
span{
	font-family:Arial, Helvetica, sans-serif;
	height:100px; font-size:80px;
	font-weight:bold;
	color:#50a6ff;
}
span.wave1{	
	filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);
}
span.wave2{	
	filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);
}
span.wave3{	
	filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);
}
-->
</style>
   </head>
<body>
	<span class="wave1">波浪Wave</span>
	<span class="wave2">波浪Wave</span>
	<span class="wave3">波浪Wave</span>
</body>
</html></span>
       运行效果如下:

       
       分析一下上面的例子,这里的三段文字,每一个都采用了一个波浪的效果:

       (add=0,freq=2,lightstrength=70,phase=75,strength=4),表示的频率是2,最后的程度是4,最后我们来看一个综合的例子,三个滤镜搭配使用,会有什么样的神奇效果,例子代码和运行效果如下所示:

<span style="font-size:18px;"><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></span>
      运行效果如下:
      

       小编寄语:这篇博文,小编主要简单的介绍了CSS中关于滤镜的相关 知识点,分别介绍了Alpha通道,Blur模糊,透明色等等,最后一个小例子,三个滤镜同时使用,各位小伙伴如果想把效果做的更美更绚一点,小编还是推荐使用photoshop,毕竟这些小例子在各个浏览器里面的显示效果有差别,BS学习,未完待续......

目录
相关文章
|
14天前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
19 5
|
18天前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
15 1
|
20天前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
1月前
|
前端开发 JavaScript UED
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。