请简要表述并实操应用css实现滤镜效果

html-css06

请简要表述并实操应用css实现滤镜效果,第1张

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title></title>

<style type="text/css">

#all{border: 1px solid #BFBFBFwidth: 500pxheight: 200pxposition: relativetop: 100pxmargin: 0 auto}

li{list-style: nonewidth: 120pxheight: 120pxbackground: #000000float: leftmargin-left: 5pxtext-align: centercolor: #FFFFFFfont-size: 20px}

li:hover{opacity: 0.5}

</style>

</head>

<body>

<div id="all">

<ul>

<li>我是猪</li>

<li>我是猪</li>

<li>我是猪</li>

</ul>

</div>

</body>

</html>

所谓的滤镜就是改变透明度而已，如果是在css中来写，就是直接给你要改变的标签设置透明度属性，如果是js，那就添加动画改变透明度，可以做出很多很炫的效果。

用CSS的滤镜效果来制作的渐变色效果。【所谓渐变色，就是指定一个开始颜色，指定一个结束颜色，整个背景便从左到右由开始颜色向结束颜色逐渐变化，整个背景的颜色是动态连续的，越接近右边其颜色就越接近结束颜色，越远离开始颜色，是一种常用的网页用css的透明滤镜,alpha 然后 给图片加上 onmouseover 和 onmouseout 属性, onmouseover事件的响应函数里面把img的class更改onmouseout事件的响应函数里面把img的class改为透明滤镜就可以了.

http://zhidao.baidu.com/question/1039537.html