简明现代魔法 -> CSS层叠样式表 -> CSS圆角化背景图片

CSS圆角化背景图片

2009-12-01

效果演示

圆角图片方案三

标题采用一张上下渐变的图片以水平平铺方式实现,看看图片的也可以做成外圆角透明的效果了。

背景图片也圆角化,好像目前在网络上还没有这样的功能应用,我只见过用js方式来实现的。

像这种小面积布局在网页设计中应用得很普遍,但目前网络流行的作法都是采用图片的方式来实现的,将图片按上中下切成三块内容,然后使用三个同级的DIV或SPAN容器各自填充一张图,但是这种方法有一个最大的毛病:不能自动适应宽度的变化,一般做法都是采用固定宽度的方式,这是由于图片的宽度决定的。

当然对于一些比较有经验的人员来说,可以采用九宫格布局方式或者滑动门方式来做到自适应宽度的变化,九宫格一般都需要用到八张图片,而滑动门虽然只用一张图片,但为了适应宽度的变化,这张图片一般都做得很大。

而现在这种方法可以完全做到适应不同的宽度需要,并且全部兼容所有的浏览器,而所需要的仅仅是一张很小的水平平辅的背景图片而已。

基本原理

我们都知道图片是方方正正的,不可能做出圆角效果,那么我们如何来做外圆透明的图片呢?其实道理说明了也就是一件很简单的事情,你看过下面的放大示意图后可能就会“哦”地一声,原来不过如此……

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

但是需要注意的是:每个b标签加载图片的定位是不一样的。

背景图片定位原理

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结构层

<div class="wrapper">
    <!--风格三,只需要变换一个CLASS就可以换一种颜色-->
    <div class="sharp color3">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 
        <div class="contentBox">  
              <h3>圆角图片方案三</h3>
              <div class="content">标题采用一张上下渐变的图片以水平平铺方式实现,看看图片的也可以做成外圆角透明的效果了。<br/><br/></div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>    
    </div>
</div>

CSS样式层

.wrapper{width:100%;margin:0 auto;padding:0;}
/*通用样式--容器宽度值*/
.sharp{width:30%;margin:20px auto 0;margin-left:2%;}
.sharp .contentBox div{padding:10px;text-indent:2em;}
.contentBox{height:150px; background:#fff;} 
h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;color:#fff;} 

/*圆角框通用设置样式,如果要运用多个不同颜色,以下部分不用重新变化--------------------------------*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.contentBox {border-right:1px solid;border-left:1px solid;overflow:hidden;}
/*图片偏移定位--上面部分*/
.sharp b.b2{background-position:left top;}
.sharp b.b3{background-position:left -1px;}
.sharp b.b4{background-position:left -2px;}
.sharp .contentBox h3{background-position:left -4px;}
/*图片偏移定位--下面部分*/
.sharp b.b7{background-position:left top;}
.sharp b.b6{background-position:left -1px;}
.sharp b.b5{background-position:left -2px;}
.sharp .contentBox h3{background-position:left -4px;margin:0;}

/*颜色方案三,淡黄风格----------------------------------------*/
/*边框色*/

.color3 .b2,.color3 .b3,.color3 .b4,.color3 .b5,.color3 .b6,.color3 
.b7,.color3 .contentBox{border-color:#D27D00;}
.color3 .b1,.color3 .b8{background:#D27D00;}
.color3 h3{border-bottom:1px #D27D00 solid;}
/*图片路径*/
.color3 .b2,.color3 .b3,.color3 .b4,.color3 h3{background:url(images/bg1.gif) repeat-x;}
.color3 .b5,.color3 .b6,.color3 .b7{background:#FFF;}

在各个不同的块框中有不同的背景图片的变化,也就是说,我们也要实现不同的换肤方案,当一个页面要多次调用同一个圆角框时,也可以让它们有些丰富的变化。实现不同的风格。OK,没问题,你只需要简单的将下面的样式中的背景图片的路径改变一下就可以了。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们