不使用CSS图像创建类似图像效果的技术(通过CSS引入的背景图像,不包括img标记中的图像);换句话说,使用纯CSS生成类似图像效果的技术。
首先,我们通过统计查看新浪主页的最新版本,得到样式表文件(CSS文件)大小为206.8K,CSS图像大小为623.8K。
CSS Image由一系列图片组成,每个图片都包含最小的箭头,您需要保存为一张图片并占用1KB的空间。
如果我们以CSS的形式来模拟小箭头,那么空间资源将占据多少让我们来计算一下。首先,粘贴代码。
CSS文件中有至少200个字符。如果计算一个字符等于1B,则200个字符大约等于0.2KB,这节省了下载资源的时间,并且大大减少了请求资源的大小。明显减少了HTTP请求的数量,增加了页面大小。如果使用CSS而不使用图片技术,则只需要更改CSS属性即可实现效果并提高代码的可维护性。
大致有四种方法:一种是通过背景色和边框生成图片;另一种是通过字符生成图片;第三种是通过CSS3渐变等生成图片(这考虑到了低级浏览器的不兼容性);图片从CSS3的自定义字体(@字体脸)。
1 使用CSS的背景颜色和边框属性,可以生成一些图形,比如三角形,纯CSS2的内容可以完全与IE6兼容。
2 字符生成的图像,如尖角、圆点和箭头,也是与ie6完全兼容的CSS2类别。
3 CSS3生成图像,使用CSS3的新属性,如方框阴影、边界半径、梯度梯度来生成图形。在IE浏览器中使用梯度背景需要IE梯度过滤器,但是过滤器资源的使用会消耗很多,所以,要根据项目的实际情况来权衡是否使用过滤器。Google搜索按钮不使用过滤器,IE浏览器不做梯度处理,大家都知道Google很关注性能的公司,有时为了表现最佳,牺牲一点视觉体验是可以接受的。
4 CSS3的自定义字体(@字体脸)生成图片。虽然这种方法并不真正意味着没有图片,但它很容易编辑和维护。更重要的是,它的大小和颜色可以由CSS控制,间接地减少了图片的使用。
简言之,CSS无图片技术是一个概念,我们需要在写作中形成CSS风格,在实际项目中权衡利弊灵活运用无图片技术做一些合理有效的改进优化。