css用一张大图片来设置背景的技术真相
之前就知道了用一张图片来设置页面内的所有背景的技术。原理很简单，利用background-potision精确地定位到图片的位置。好处是减少页面 的http请求数。
老实说，我并不觉得这个技术有多值得推广。虽然是减少了http请求数，但对于99%的网站来说，这个改进基本是看不见的。除了超一流的大网站，流量巨 大，减少http请求数可以看到效果，绝大多数的网站根本不需要这个技术。相较于它带来的几乎看不见的好处，它带来的坏处却很多。首先，要把所有小图片集 中到一张大图片上，这多了一个步骤，而图片之间的位置一旦定好很难进行改动，因为如果一旦要改动一个图片的位置，带来的是一系列图片位置的调整，整个页面 的背景可能会全部崩溃！！！是全部！！！也就是说，它的维护成本，还有适应性都非常地差！而图片之间的摆放，如何让页面内的小图标能最密集地排列从而让整 张图尺寸能尽可能地小也是要考虑的问题，很头疼。
再来讲讲技术实现上的难点。一个很关键的问题是，精确定位图片的位置并不算完，图片的平铺和容器的大小自适应才是一个让人很头疼的问题。也就是说，如果一 个容器的大小很大，而我们对这个容器设的背景很小，我们就要考虑到，如果这个容器大背景一定会平铺，会影响我们的效果。我们可以设置no-repeat来 禁止背景平铺，可是如果容器的大小大到超出了我们设置的最大值，会不会把旁边的图片拉过来接着做背景呢？一个解决方案是给每个自适应大小的容器，在放置背 景图的时候，尽量给背景图周围留下足够大的空白区。可是如此一来，小图片们就会很零散地聚在大图片中，和我们想要让“图片密集地集中在一块儿”的目的相违 背。
怎么办呢？今天看了一下应用这个技术的站点，发现原来他们用了一个1 * 1像素的透明gif图片！这是个很有趣的方法。如果一个大容器中需要一个小图片做背景，他们不会直接对大容器设背景，然后留大量空白，而是给那个1*1的 gif图片取个class或者id，用css控制它的大小和背景。这用得很巧妙。因为对于块级元素来说虽然可以定义大小和长宽，却是独占一行的，如果用 float来让它和其它行内元素呆在一行的话，还需要清除浮动等等，很麻烦。如果是行内元素，却又没办法设置长宽。很好用的inline-block却得 不到IE6的支持，为了兼容我们又不能对元素设置display:inline-block; 好在IE虽然不支持css设置display:inline-block;引擎里却还是对一些元素提供这样的样式支持，包括img,input和 table都是这样的元素。用1*1象素的gif来设置长宽和背景，这样一来，就可以实现display:inline-block了。
总结一下，技术真相是什么呢？就是利用1 * 1像素的透明gif图片来实现大容器中的小背景。
css用一张大图片来设置背景的技术真相相关推荐
- css ul li 图标 图片位置定位 背景定位
css ul li 图标 图片位置定位 背景定位 这是网站页面只有一张背景图片的时代 众多大型网站都是背景图片只用一整张这种模式 背景图片的定位应用广泛 .cases li{ lineheight:2 ...
- android取消背景图片,android 设置背景图片
>**无背景的代码稍显枯燥啊少年: vs2015,vs2019等 再拓展里下载:** ! import java.awt.FlowLayout; import javax.swing.Image ...
- html设计渐变的背景图片,html设置背景径向渐变的方法
html设置背景径向渐变的方法 发布时间:2021-06-04 16:16:47 来源:亿速云 阅读:91 作者:栢白 这篇文章主要介绍了html设置背景径向渐变的方法,具有一定借鉴价值,需要的朋友可 ...
- linux qt 背景图片,qt设置背景图片
<一>http://blog.csdn.net/qq5823996/article/details/6851788 Qt的窗口背景图片有3种方式设置 1.QPalette p; p.set ...
- java 设置panel背景图片_jpanel设置背景图片的二个小例子
import java.awt.*; import javax.swing.*; public class Demo extends JFrame { public Demo() { super(&q ...
- java改变背景图片大小,设置背景图片大小相同的的Java应用程序窗口/屏幕
I would like to set a background image the same size as my window/screen. I would prefer to do this ...
- html表格中加背景图片,table设置背景图片，不能100%显示解决方法
在开发中发现了下面的情况: (1) 如果文件存放为.jsp文件后缀的形式,代码如下所示(index.jsp): 复制代码代码如下: 让表格百分之一百显示 程序运行后,页面中显示的效果如下图所示: 该效 ...
- 怎么把html背景图片,css如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
- html设置背景图片覆盖不重复
HTML设置背景图 在css或body的style属性设置背景图片. body{background-image:url(../img/pic_one.jpg) ;/*插入的背景图片的urlbackg ...
最新文章
- 使用Maven 打包项目 生成XXX.tar.gz 文件
- 如何使用 Cockpit 管理你的树莓派
- mysql5.7.23权限问题_部署MySQL5.7时的权限问题
- PL/SQL两种case语句写法
- Win7中修改Chrome浏览器缓存文件目录
- 王飞跃 | 社会机器：历史的起源与目标
- 生成一个GitHub的token用于git推送本地库至远程库
- python协程第一课(实现爬取自己博客)
- angular路由模块（二）
- jmeter监控服务器的方法
- C语言课程设计--推箱子
- eclipse保护眼睛色设置
- 电子元件识别 测量
- 人脸识别 | AI产品经理需要了解的CV通识（二）
- linux磁盘管理——quota磁盘配额GPT分区
- C++实验3-税收计算
- (转载)多少年来心血的结晶
- java.sql.SQLException: No suitable driver found for jdbc
- matplotlib之pyplot模块——填充多边形（fill）
- git push错误,如何回滚