css背景图片的背景裁切、背景透明度、背景变换等效果运用

这篇文章是99翻译Nicolas Gallagher 的CSS background image hacks 一文。大家都知道，目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果。那么这篇文章将详细介绍了这几种背景图片的处理方法。

正如前面所说，仅仅依靠CSS现有的属性，我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果，我们需要借助CSS的其他方法来实现，比如说CSS伪元素，他可以帮助我们模拟出这些CSS无法实现的效果，在开始了解怎么实现这些效果之前，我们一起来看一些DEMO效果，让我们最初一个概念。

伪元素技巧不需要添加额外的HTML标签就可以填补浏览器对一些CSS特性支持的真空，甚至可以模拟一些还未进入w3c草案的CSS特性，比如今天要说的背景变换、背景透明等等。

今天这篇文章中利用到的伪元素的大部分技巧均在早前的文章Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有点烦的话，你可以看看由志哥翻译的文章使用css2.1实现多重背景、多重边框效果)有做过详细介绍，在这篇文章中已经详细讲解了怎样利用伪元素模拟CSS的多背景特性和CSS多边框的特效，文章的Multiple Backgrounds with CSS 2.1 和Multiple Borders with CSS 2.1 页也展现了一些利用伪元素来实现其他特性的基本原理。

这种方法制作的背景剪裁，目前知道的就支持：Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

利用css2.1即可模拟背景裁切效果。原理是把背景图片作为伪元素的背景，而不是作为原本容器的背景。下面第一个例子的效果是裁剪一部分背景，第二个效果可以裁剪css sprite，利用这个特性来制作文字旁边的小图片:

某种程度上，相比其他可用的方法使用伪元素是有优势的，伪元素结合了一些方法的优点，而某种程度上又可以规避他们的缺点

Google、facebook、 twitter 均使用空白dom元素来裁切他们复杂sprites，用来实现界面上链接旁的图标效果。

伪元素也可以用类似空白dom元素应用的方式来使用。同时，使用伪元素不需要依赖额外的html标签，而且不会过分依靠sprites。此方法的缺点是ie6，7浏览器不支持。利用此种方式，可以实现渐进增强，加强支持此特性浏览器页面的表现效果，而低版本浏览器仍采用空白元素的办法，同样可以完美的得到我们想要的效果。

这个例子展示了如何从一张排列紧密的雪碧图中裁切出你需要的图标。裁切尺寸为16*16。只需要创建一个ul列表，在需要生效的部分指定一个class即可

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表