当前位置: 网站建设 > 网页设计 > 建站经验 >

纯CSS圆角框2-透明圆角化背景图片

时间:2013-03-02 04:09来源:未知 作者:admin 点击:

标签:纯CSS圆角框2-透明圆角化背景图片 透明(11)网站建设(1202)角化(5)CSS(823)背景图片(5)圆角(28)
--> [网站建设之]纯CSS圆角框2-透明圆角化背景图片 , 纯CSS圆角框1-基本的圆角框 在上面的案例中,我只给出最为原始的圆角框模型,它还是存在一些不足之处。比方不能将图片运用到圆角框内。而在本例中,我会在上面的基本上作出一些翻新。就是将背景图片也圆角化,似乎目前在网络上还不这样的功效应用,我只见过用js方式来实现的,但是纯CSS方式的实现可是我独家所创,如有相同,只能说好汉所见略同。呵呵! 仍是先看看终极的后果图,让大家有一个大略的印象。 图一 像这种小面积布局在网页设计中利用得很广泛,但目前网
纯CSS圆角框2-透明圆角化背景图片》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302345502013.htm
--> [网站建设之]纯CSS圆角框2-透明圆角化背景图片 ,纯CSS圆角框1-基本的圆角框

在上面的案例中,我只给出最为原始的圆角框模型,它还是存在一些不足之处。比方不能将图片运用到圆角框内。而在本例中,我会在上面的基本上作出一些翻新。就是将背景图片也圆角化,似乎目前在网络上还不这样的功效应用,我只见过用js方式来实现的,但是纯CSS方式的实现可是我独家所创,如有相同,只能说好汉所见略同。呵呵!

仍是先看看终极的后果图,让大家有一个大略的印象。





图一

像这种小面积布局在网页设计中利用得很广泛,但目前网络风行的作法都是采用图片的方式来实现的,将图片按上中下切成三块内容,而后应用三个同级的DIV或SPAN容器各自填充一张图,但是这种方法有一个最大的弊病:不能主动适应宽度的变化,正常做法都是采用固定宽度的方式,这是因为图片的宽度决议的,纯CSS图片预加载

当然对一些比拟有教训的职员来说,可以采取九宫格布局(可参看我的另一篇文章《九宫格基础布局》)方法或者滑动门方式来做到自适应宽度的变化,纯CSS制作的新闻网站中的文章列表,九宫格个别都需要用到八张图片,而滑动门固然只用一张图片,但为了适应宽度的变更,这张图片普通都做得很大。

而我当初独创的这种方式能够完整做到适应不同的宽度需要,并且全体兼容所有的阅读器,而所需要的仅仅是一张很小的程度平辅的背景图片罢了。

空话少说,言归正传。

根本原理:

咱们都晓得图片是方方正正的,不可能做出圆角效果,那么我们如何来做外圆透明的图片呢?实在情理阐明了也就是一件很简略的事件,你看过下面的放大示用意后可能就会“哦”地一声,本来不外如斯……


 


图二

是的,看到这个效果图你会高深莫测,可是要想到这个办法,纯CSS代码实现翻页,我却挥霍了不少脑细胞。呵呵!

实现这种方法原理很简单:在每个b标签中各加载一次同样的图片,并联合背景定位background-position方式来达到效果。我们知道,统一张图片加载多少次对于机能的影响并不大,由于这张图片已经被电脑缓存到本地,和用css sprites合并图片一样的道理。

然而须要留神的是:每个b标签加载图片的定位是不一样的。

背景图片定位原理:

b1标签位于第一位,它重要用来刻画上边框线,所以它不需要加载背景图片。

b2标签位于第二位,它是第一个需要加载背景图片的,但是不需要图片负偏移,所以直接居左居顶定位就可以了。

代码
.b2{background-position:left top;}
b3标签位于第三位,它需要加载背景图片,让它的背景图片向上负偏移b2的高度值就可以,纯CSS代码写的圆角效果,也就是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的图片叠加起来和原始图片高低渐变的效果完全重合,犹如一张图片,这样就到达模仿圆角图片的效果。

怎么样,原理够简单明了吧!

原理明白后,要实现起来也就是一件瓜熟蒂落的事! Tag:圆角框   圆角框  
(责任编辑:网站建设)
纯CSS圆角框2-透明圆角化背景图片相关文章
上一篇:纯CSS圆角框1-基本的圆角框 下一篇:纯CSS圆角框3-圆角化图片
回到顶部