 |
网站建设 |
 |
|
最新客户 |
|
|
网站推广 |
|
|
推广知识 |
|
|
 |
建站技术知识 |
 |
| |
|
|
| |
纯CSS圆角框2－透明圆角化背景图片
|
在上面的案例中，我只给出最为原始的圆角框模型，它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中，我会在上面的基础上作出一些创新。就是将背景图片也圆角化，好像目前在网络上还没有这样的功能应用，我只见过用js方式来实现的，但是纯CSS方式的实现可是我独家所创，如有雷同，只能说英雄所见略同。呵呵！
还是先看看最终的效果图，让大家有一个大概的印象。
图一
像这种小面积布局在网页设计中应用得很普遍，但目前网络流行的作法都是采用图片的方式来实现的，将图片按上中下切成三块内容，然后使用三个同级的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的图片叠加起来和原始图片上下渐变的效果完全重合，如同一张图片，这样就达到模拟圆角图片的效果。
怎么样，原理够简单明了吧！
原理清楚后，要实现起来也就是一件水到渠成的事！
上一页12 下一页
< |
|
|
|
| |
|
|
|
 |
|
 |
在线咨询 |
 |
|
建站服务 |
|
经济型网站设计套餐 ￥2580 |
企业型网站设计套餐 ￥3980 |
豪华型网站设计套餐 ￥6580 |
商城型网站设计套餐 ￥7580 |
定制型网站设计套餐 ￥面 谈 |
智赢型ABC ￥1580/1980 |
|
|
|
 |
|
虚拟主机 |
|
普及型（电信）350元/年 |
经济型（电信）650元/年
|
普及A型（双线）500元/年 |
普及B型（双线）900元/年 |
外贸型（国外） 550元/年
|
企业型（国外） 1050元/年 |
我要订购主机>> |
|
|
|
域名注册 |
|
国际顶级域名.com 100元/年 |
国际顶级域名.net 100元/年 |
国际顶级域名.cc 380元/年 |
国际顶级域名.org 180元/年 |
中国顶级域名.cn 100元/年 |
中国顶级域名.com.cn 100元/年 |
中文域名.中国.公司 280元/年 |
我要注册域>> |
|
|
|
