专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » css实现背景渐变:用背景图片实现CSS柱状图表一例 »正文

css实现背景渐变:用背景图片实现CSS柱状图表一例

来源: 发布时间:星期四, 2009年2月12日 浏览:209次 评论:0


　　我们前面文章中介绍了CSS基本条状图表实现思路方法:http://www.52css.com/article.asp?id=362我们现在介绍用背景图片思路方法实现柱状图表看下面效果图:

\"\"/

　　实现这样图表并没有什么难处我们看下面xhtml代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<divid=\"vertgraph\">
<ul>
<li=\"critical\"style=\"height:150px;\">22</li>
<li=\"high\"style=\"height:80px;\">7</li>
<li=\"medium\"style=\"height:50px;\">3</li>
<li=\"low\"style=\"height:90px;\">8</li>
<li=\"info\"style=\"height:40px;\">2</li>
</ul>
</div>


　　这是个无序列表我们注意到我们在xhtml中使用行内样式定义了区别li高度
　　我们在这图表制作中需要使用两张图片分别如下:

\" border=\"0\" alt=\"\"/>

\"\"/

　　我们看下面css代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#vertgraph{
width:378px;
height:207px;
position:relative;
background:url(\"g_backbar.g\")no-repeat;
}
#vertgraphul{
width:378px;
height:207px;
margin:0;
padding:0;
}
#vertgraphulli{
position:absolute;
width:28px;
height:160px;
bottom:34px;
padding:0!important;
margin:0!important;
background:url(\"g_colorbar3.jpg\")no-repeat!important;
text-align:center;
font-weight:bold;
color:white;
line-height:2.5em;
}
#vertgraphli.critical{left:24px;background-position:0pxbottom!important;}
#vertgraphli.high{left:101px;background-position:-28pxbottom!important;}
#vertgraphli.medium{left:176px;background-position:-56pxbottom!important;}
#vertgraphli.low{left:251px;background-position:-84pxbottom!important;}
#vertgraphli.info{left:327px;background-position:-112pxbottom!important;}


　　这段CSS代码就定义了这个柱状图表显示我们需要注意是background-position属性应用这属性是实现图表关键有关CSSbackground-position属性可以参考这里:http://www.52css.com/css/c_backgroundposition.html


　　我们看最终运行效果:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]


　　
标签：css背景透明 css背景图片 css背景 css实现背景渐变
0
我顶

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章