您当前的位置: 站长圈 > 技术文章 > 网页前端 > div+css圆角框之二——2图片自适应宽度

div+css圆角框之二——2图片自适应宽度

来源:站长圈 作者:adminzzq 点击: 0
这次我们介绍用2张图片制作可伸缩的圆角框。原理是在两个嵌套的块中各放一张背景图片,一张图片的背景左对齐,另外一张图片的背景右对齐,然后左右两张图片再拼合在一起就形成了一个完整的圆角框了。

那么,应该怎么样切这两张图片呢?我们先举一个左宽右窄的例子来看一下。试着想象一下,下图左右两张图片慢慢靠近,然后重叠,然后交叉,然后会出现什么效果呢?

\

假设,如果图片的背景色是透明的,是不是就会出现如下图所示的情况呢:在右边的圆角框的透明区域显示出了左边图片的颜色
\
所以这样切图的话,图片背景色一定要设置成网页的背景色才行。
下面,我们看看css怎么写吧,先把左边的图片作为a标签的背景图片左对齐,右边的图片作为span标签的背景图片右对齐,span标签嵌套在a标签里,然后整个圆角框的宽度由最里层的文字来决定,为了美观,把span标签设置一个左右padding,如:padding:0 10px;,这样,圆角框的宽度就等于字符宽度加上内边距宽度,也就自适应,不会固定死了。

完整html代码;

 



css代码:


浏览器里显示的效果图如下:
\
这里的宽度虽然是自适应的,但也不是无限宽的,字符最长宽度要小于左图宽+右图宽-2倍的圆角宽

只要知道了圆角框这样组成的原理,我们就可以发挥想象,比如,放两张背景图片的块可不可以不要嵌套,而是左右并列呢?那样我们是不是就可以把图片的背景设置成透明,可以简单的就能适合各个不同背景的网页呢?再比如,如果图片是切成左窄右宽或者左右一样宽,该如何写css呢?朋友们可以自己试一试哦。