纯CSS圆角框2－透明圆角化背景图片
来源：冰极峰blog 发布时间：2009-12-11 19:10:00
第一章：基本的圆角框
第二章：透明圆角化背景图片
第三章：圆角化图片
第四章：CSS圆角框组件 V1.0
在上面的案例中，我只给出最为原始的圆角框模型，它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中，我会在上面的基础上作出一些创新。就是将背景图片也圆角化，好像目前在网络上还没有这样的功能应用，我只见过用js方式来实现的，可以参看我的《超圆滑圆角框的半完美解决方案》一文中后面几种JS方案。但是纯CSS方式的实现可是我独家所创，如有雷同，只能说英雄所见略同。呵呵！
还是先看看最终的效果图，让大家有一个大概的印象。
图一
像这种小面积布局在网页设计中应用得很普遍，但目前网络流行的作法都是采用图片的方式来实现的，将图片按上中下切成三块内容，然后使用三个同级的DIV或SPAN容器各自填充一张图，但是这种方法有一个最大的毛病：不能自动适应宽度的变化，一般做法都是采用固定宽度的方式，这是由于图片的宽度决定的。
当然对于一些比较有经验的人员来说，可以采用九宫格布局(可参看我的另一篇文章《九宫格基本布局》）方式或者滑动门方式来做到自适应宽度的变化，九宫格一般都需要用到八张图片，而滑动门虽然只用一张图片，但为了适应宽度的变化，这张图片一般都做得很大。
而我现在独创的这种方法可以完全做到适应不同的宽度需要，并且全部兼容所有的浏览器，而所需要的仅仅是一张很小的水平平辅的背景图片而已。
废话少说，言归正传。
基本原理：
我们都知道图片是方方正正的，不可能做出圆角效果，那么我们如何来做外圆透明的图片呢？其实道理说明了也就是一件很简单的事情，你看过下面的放大示意图后可能就会“哦”地一声，原来不过如此……
图二
是的，看到这个效果图你会一目了然，可是要想到这个方法，我却浪费了不少脑细胞。呵呵！
实现这种方法原理很简单：在每个b标签中各加载一次同样的图片，并结合背景定位background-position方式来达到效果。我们知道，同一张图片加载多少次对于性能的影响并不大，因为这张图片已经被电脑缓存到本地，和用css sprites合并图片一样的道理。
但是需要注意的是：每个b标签加载图片的定位是不一样的。
0
投稿猜你喜欢
vue单页开发时经常需要父子组件之间传值，自己用过但是不是很熟练，这里我抽空整理了一下思路，写写自己的总结。GitHub地址：https:/- 简单介绍下功能吧：使用了ASP的一个对象ServerVariables（服务器环境变量），通过这个环境变量可以获取到真正的下载地址再通过一些
- 本文实例讲述了JavaScript函数重载操作。分享给大家供大家参考，具体如下：上个星期四下午，接到了网易的视频面试（前端实习生第二轮技术面
- 当我们学习python的时候，总会用到一些常用的模块，接下来我就详细讲解下利用两种不同的方式画饼状图。首先利用【Tkinter】中的canv
- 在刚过去不久的6月30日那天，国外一位在YouTube拥有上千万粉丝的我的世界游戏主播Technoblade因癌症与世长辞，年仅23岁，他并
- 我们使用编辑器的时候，想要在其中添加一个Django项目，这样就能在里面做一些想要的操作。有些人还没有对Django进行安装，这里直接用命令
- 如下所示：在def __init__(self):函数里添加self.setFixedSize(self.width(), self.hei
- From Python正则表达式re.match(pattern, string, flags=0)尝试从字符串起始位置匹配一个模式；如果不
- 由于最近需要做项目，需要进行分词等，查了资料之后，发现python NLTK很强大，于是就想试试看。在网上找了很多安装资料，都不太完整，下载
- 1. 直接采用命令行模式更新1.1 搜索框搜索cmd，然后以管理员模式打开1.2 执行命令python -m pip install --u
- 抽象特点Python 一切皆对象，基于此概念，对 类 class 有以下特点：类与实例的属性类对象创建可选择定义类属性，创建实例对象时，实例
- 前言这是一个轮子。大家都知道 Ansible 是功能超级强大的自动化运维工具，十分的高大上。太高大上了以至于在低端运维有点水土不服，在于三点
- 本文实例为大家分享了js实现本地持久化存储登录注册的具体代码，供大家参考，具体内容如下1.登录html文件<!DOCTYPE html
- 图片按钮是我们经常应用的网页元素，按钮的生成有两种方法，一个是用链接<a>来模拟按钮，一个是用现成的表单按钮。<input
- 相信大家在日常的开发中经常会碰到榜单类的活动需求，通常在榜单中都会要求返回排名，今天我们就用MySQL的窗口函数来快速实现一下首先，先建一个
- 1. 准备工作有朋友可能没用过folium，它其实就是python的一个专业绘制地图的第三方库，所以在使用之前需要先安装它。pip
- 大家在写按钮（input、button）的时候会发现在 IE 下：随着字数的增多，两边的间距也会越来越大。在 WIN 的XP 风格下，当字数
- 一、动机（Motivate）在软件构建过程中，某些对象使用的算法可能多种多样，经常改变，如果将这些算法都编码到对象中，将会使对象变得异常复杂
- 前面的话一般的程序语言，表示空的只有null，但javascript的设计者Brendan Eich却设计了一个undefined，这无疑增
- Oracle当然是世界上最强大的数据库，但它的客户端sqlplus真的不友好，现在还不能支持上下方向键翻查历史命令，这里介绍使用readli
