纯CSS圆角框2-透明圆角化背景图片(2)
来源:冰极峰blog 发布时间:2009-12-11 19:10:00
背景图片定位原理:
b1标签位于第一位,它主要用来描绘上边框线,所以它不需要加载背景图片。
b2标签位于第二位,它是第一个需要加载背景图片的,但是不需要图片负偏移,所以直接居左居顶定位就可以了。
.b2{background-position:left top;}
b3标签位于第三位,它需要加载背景图片,让它的背景图片向上负偏移b2的高度值就可以,也就是1px。
.b3{background-position:left -1px;}
b4位于第四位,所以它向上负偏移b2+b3高度值的和,为2px。
.b4{background-position:left -2px;}
H3标签位于第五位,所以它的背景图片需要向上负偏移b2+b3+b4高度值的各,也就是4px;
h3{background-position:left -4px;}
这样,b2、b3、b4、h3的图片叠加起来和原始图片上下渐变的效果完全重合,如同一张图片,这样就达到模拟圆角图片的效果。
怎么样,原理够简单明了吧!
原理清楚后,要实现起来也就是一件水到渠成的事!
HTML结构层:
如同我们在第一章中模型所见,保持结构不变。
CSS样式层:(只写关键代码)
将上面的几句代码进行合并,如下所示:
.sharp b.b2{background-position:left top;}
.sharp b.b3{background-position:left -1px;}
.sharp b.b4{background-position:left -2px;}
.sharp .content h3{background-position:left -4px;}
和第一章中同样的道理,我们肯定要在各个不同的块框中有不同的背景图片的变化,也就是说,我们也要实现不同的换肤方案,当一个页面要多次调用同一个圆角框时,也可以让它们有些丰富的变化。实现不同的风格。OK,没问题,你只需要简单的将下面的样式中的背景图片的路径改变一下就可以了。
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}
你可以实现不同的颜色方案,就看你的设计师给你多少张不同图片了。
一种风格的定制也是一件简单的事情:
*颜色方案一,绿色风格----------------------------------------*/
/*边框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#A0C044;}
.color1 .b1,.color1 .b8{background:#A0C044;}
.color1 h3{border-bottom:1px #679800 solid;}
/*图片路径*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}
/*文字内容背景色*/
.color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}
你只需要复制上面的代码,简单修改一下边框色,背景色,图片路径就变成你想要的风格了,是不是很简单呢?然后在你想应用样式的容器上定义这个color1类名即可。
在我的演示模型中,我定义了9种风格的变化,看看有没有适合你需要,直接复制就可以使用了,祝您用得开心!
为了演示效果,本模型的宽度值全部采用百分比实现的,你可以随意伸缩宽度,看看它能否适应弹性的变化。
本模型在以下浏览器中完美通过:
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
点击这儿下载完整的压缩包:Demo (6.11 KB)
本站下载地址:CSS圆角.rar (6.11 KB)
猜你喜欢
- 用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手,它可以使窗口显得清爽整洁而且富有动感,笔者的几个朋
- <script type="text/javascript"> var params&n
- 1.基本结构 create OR REPLACE PROCEDURE存储过程名字 ( 参数1 IN NUMBER, 参数2 IN NUMBE
- 分区视图联接来自一组成员的水平分区数据,使数据看起来象来自同一张表。SQL Server 2000 区分本地分区视图和分布式分区视图。在本地
- 内容摘要:本文介绍了使用js来实现下拉伸缩导航菜单的功能,并带有渐显的效果,值得收藏。正好这几天公司不忙,学校又没有事情,所以想抽空架一个个
- 来看看效果图对比:字符验证码: → 加法验证码:优点:①与纯字符验证码相比,本程序效防止了绝大部分(99%以上)广告机的自动识别。即使是中文
- 在IE下,获取Param的时候有个诡异现象(不知道算不算bug)。为了清晰起见,下面用最简单的HTML和JavaScript来说明。有这么一
- 1、简单的按钮js事件 用于判断和显示提示 <script type="text/javascript&
- 1.如果每页都增加打印时间,又如何设置?打印时间的,你可以参考 for(var i=0;i<page.length;i++)
- 如何用数据库制作一个多用户版的计数器?代码和说明如下:count.asp' 计数器的核心程序<%Set c
- /* --注意:准备数据(可略过,非常耗时) CREATE TABLE CHECK1_T1 ( ID INT, C1 CHAR(8000)
- 本文的目的是探讨JS相关技术,并不是以杀毒为主要目的,杀毒只是为讲解一些JS做铺垫的,呵呵,文章有点长,倒杯咖啡或者清茶慢慢看,学习切勿急躁
- 如何实现像腾讯QQ聊天窗口中文字链接提醒效果。完善了部分代码...比如,在不是连接的地方单击的时候,把那个提示关闭掉...在复制不成功的时候
- 经过一轮的项目封闭开发,页面制作的动手能力提高了不少,用AW的话说就是被复杂的东西虐过以后很多问题都变得容易了,的确很有道理。我个人觉得技术
- <input name="a" type="checkbox"
- 昨天有位同事说,他的网页查询过程中发现普通索引和唯一索引的效率是有差别的,普通索引比唯一索引快,今天在我的虚拟机中布置了环境,测试抓图如下:
- Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为:connection can no
- 元素的CSS样式,除了包括内联的(即通过style属性加上的)样式定义外,还有页面嵌入的css和外部引入的css两种方式。但在JS中通过el
- ASP+XML制作菜单管理!menu.asp 这个是前台执行部分<% '----------------
- 去掉html中的table代码 Function OutTable(str) dim a,re&nb