css用一张大图片来设置背景优缺点 实现方法
来源:互联网 发布:mac用迅雷下载速度慢 编辑:程序博客网 时间:2024/06/10 06:43
实现方法:
将页面的所有需要表现的网页背景图片集成在一张图片上,通过css background-position:x, y 来设置某个位置具体显示的背景图片。
优点:
减少了http请求数,网页加载会快些
缺点:
维护比较困难 自适应比较难
如果一 个容器的大小很大,而我们对这个容器设的背景很小,我们就要考虑到,如果这个容器大背景一定会平铺,会影响我们的效果。
解决措施:
给每个自适应大小的容器,在放置背景图的时候,尽量给背景图周围留下足够大的空白区。
用一个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了。
0 0
- css用一张大图片来设置背景优缺点 实现方法
- Android加载一张大图片
- 在xml中直接设置大图片背景容易OOM
- CSS 实现所有背景一张图
- Android大图片背景性能优化篇
- html通过css来设置半透明背景
- Emgu Mat方法和Image方法设置一张背景图像
- css样式实现整个页面背景使用一张图片
- 18.雪碧 网页小图片的使用,可以将它们设置到一张大图上,然后用背景距离调控他们出现的位置!
- 用jquery实现类似淘宝的显示大图片
- 使用ArcMap生成一张中国的大图片
- 用一张图片来修改osgViewer的背景
- 360度不停旋转的10片叶子背景---纯css实现旋转背景
- androdi 解决加载大图片常用方法
- android加载大图片的方法
- 20佳应用大图片背景的优秀网站作品
- jQuery实现等比例缩放大图片
- jQuery实现等比例缩放大图片
- VUX v2.1.1-rc.12 发布,基于 WeUI 的 Vue 移动端组件库
- C++/C++11中std::transform的使用
- STL--Lesson001-01-STL概述
- CCF2014-09-2画图
- 对于配置了Spring编码过滤器之后,仍出现中文乱码的处理
- css用一张大图片来设置背景优缺点 实现方法
- linux 套接字函数send和recv函数(阻塞模式)
- 字段赋值映射,NGUI、UGUI事件管理
- android下拉刷新scrollview的用法pullToRefreshScrollview
- MQTT 移植STM32+GPRS(串口透传)(三)
- css 兼容ie浏览器的方法
- vue自定义指令拖拽事件
- Android点赞动画
- 三月十八小结