• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
lamber
博客园    首页    新随笔       管理    订阅  订阅

Web中filter: alpha渐变效果

<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>

想要获得成功,首先要自己相信自己,再者要赢得周围朋友的信任!
posted @ 2011-11-01 11:46  android5k  阅读(2068)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3