纯CSS圆角框2－透明圆角化背景图片
来源：冰极峰blog 发布时间：2009-12-11 19:10:00
第一章：基本的圆角框
第二章：透明圆角化背景图片
第三章：圆角化图片
第四章：CSS圆角框组件 V1.0
在上面的案例中，我只给出最为原始的圆角框模型，它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中，我会在上面的基础上作出一些创新。就是将背景图片也圆角化，好像目前在网络上还没有这样的功能应用，我只见过用js方式来实现的，可以参看我的《超圆滑圆角框的半完美解决方案》一文中后面几种JS方案。但是纯CSS方式的实现可是我独家所创，如有雷同，只能说英雄所见略同。呵呵！
还是先看看最终的效果图，让大家有一个大概的印象。
图一
像这种小面积布局在网页设计中应用得很普遍，但目前网络流行的作法都是采用图片的方式来实现的，将图片按上中下切成三块内容，然后使用三个同级的DIV或SPAN容器各自填充一张图，但是这种方法有一个最大的毛病：不能自动适应宽度的变化，一般做法都是采用固定宽度的方式，这是由于图片的宽度决定的。
当然对于一些比较有经验的人员来说，可以采用九宫格布局(可参看我的另一篇文章《九宫格基本布局》）方式或者滑动门方式来做到自适应宽度的变化，九宫格一般都需要用到八张图片，而滑动门虽然只用一张图片，但为了适应宽度的变化，这张图片一般都做得很大。
而我现在独创的这种方法可以完全做到适应不同的宽度需要，并且全部兼容所有的浏览器，而所需要的仅仅是一张很小的水平平辅的背景图片而已。
废话少说，言归正传。
基本原理：
我们都知道图片是方方正正的，不可能做出圆角效果，那么我们如何来做外圆透明的图片呢？其实道理说明了也就是一件很简单的事情，你看过下面的放大示意图后可能就会“哦”地一声，原来不过如此……
图二
是的，看到这个效果图你会一目了然，可是要想到这个方法，我却浪费了不少脑细胞。呵呵！
实现这种方法原理很简单：在每个b标签中各加载一次同样的图片，并结合背景定位background-position方式来达到效果。我们知道，同一张图片加载多少次对于性能的影响并不大，因为这张图片已经被电脑缓存到本地，和用css sprites合并图片一样的道理。
但是需要注意的是：每个b标签加载图片的定位是不一样的。
0
投稿猜你喜欢
- SQL Server 2000 的 XML 功能可以简化将现有代码作为 Web 服务提供的任务。本文集中讨论了传入和传出 Transact
- ASP具备动态输出任一Office应用程序文件格式的功能。在开始编写代码之前，我们首先需要做的就是设置正确的文件类型，因为浏览器需要知道如何
- ASP开发中有用的函数（function）集合，挺有用的，请大家保留！'******************************
使用css2.1实现多重背景、多重边框效果在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果，或者多重边框的效果。这种- insert into(列名) select 列名 from 表名 where 条件 --不创建表，只复制表数据 select 列名 int
- 密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有又有可能会给我们造成不必要的损失。作为网站设计者,如果我们在网页中能对用户输入的
- 在ASP.NET2.0通过SMTP的验证发送EMAIL ，代码如下：’Create a new MailMes
- 如何使用数组来显示下拉菜单？可以这样，如下：Sub DoDropDown(Arr(), strSelName,
- 我用 ip=Request.ServerVariables ("
- 看了OReilly.JavaScript.The.Definitive.Guide.5th.Edition.Aug.2006里的cookie
- 这个类主要解决在类型转换时,如果直接使用类型转换函数,会因为变量为空或者格式不对而导致程序报错,而这种报错在大多数情况下是允许的.例如要转换
- 分区视图联接来自一组成员的水平分区数据，使数据看起来象来自同一张表。SQL Server 2000 区分本地分区视图和分布式分区视图。在本地
- 很多人喜欢把一个网站中相同的部分象是统一的页面logo，版权声明等做成一个过程，然后放到一个include文件中，这样所有的页面就都可以使用
- <％@LANGUAGE="VBSCRIPT" CODEPAGE="936"％>
- 一般用 createProcessingInstruction 方法创建处理指令指定参数为 "xml","ve
- 最近在做学院的选课系统时，在分页上被卡壳了一下，因为需要用到排序，所以不能像以前一样用一个自动递增的字段作为主键，然后仅仅是对这个主键来做统
- 以下是服务端代码var HTTPREQUEST_PROXYSETTING_DEFAULT = 0;var&nb
- 在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多，今天罗列一
- 代码如下:登陆时记录cookies页面代码 <!--#include file="md5.asp"--&
- <％ Dim aData aData = Array(3,2,4,1,6
