Web中filter: alpha渐变效果

最新推荐文章于 2021-12-15 15:53:18 发布

转载最新推荐文章于 2021-12-15 15:53:18 发布 · 136 阅读

本文介绍了CSS（层叠样式表）的基本概念、作用和应用方式，包括其如何控制网页样式、与HTML结合使用的方法，以及CSS中的alpha透明度设置原理。详细解释了CSS在网页设计中的重要性，包括其格式化功能、可视化浏览器设置和透明度渐变效果。

<html>
<head>
<title>体验CSS</title>
<style type="text/css">
<!--
/* 上一行避免老式浏览器不支持CSS */
body{
padding:0px;
margin:0px;
background-color:#FFCB97; /* 设置背景颜色*/
}
#title{
font-size:22px;    /* 字号 */
font-weight:bold;   /* 粗体 */
text-align:center;   /* 居中 */
padding:15px;    /* 间距 */
background-color:#BEB038; /* 背景色 */
border:1px solid #FFFF00; /* 边框 */
}
#content{
padding:6px;    /* 间距 */
font-size:18px;    /* 字号 */
line-height:200%;   /* 行间距 */
}
img{
float:left;     /* 图文混排 */
filter: alpha(opacity=100,finishopacity=0,style=2); /* 渐变效果 */
}
.paragraph{
text-indent:50px;               /* 首行缩进 */
padding:6px;

font-size:18px;
line-height:200%;
}
-->
</style>
   </head>

<body>
<div id="title">CSS简介</div>
<div id="content">
<img src="bike.jpg" border="0" alt="效果在浏览器中需切换到兼容模式才能显示" />
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。</div>
<div class="paragraph"> alpha是来设置透明度的,它的基本属性是filter：alpha（opacity，finishopacity，
style，startX，startY，finishX，finishY）.
opacity代表透明度数,选值0-100,0是完全透明,100是不透明.
finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.style指渐变类型,0是无变化,1是线行渐变,2是放射渐变,3是X型渐变.</div>
</body>
</html>