站长社区 _ SEO论坛 _ SEO优化

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 89|回复: 0
收起左侧

[CSS] div+css的背景定位

[复制链接]
gridf 发表于 2018-9-27 20:33:59 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在早期table风行的年代,页面布局中使用的小图标,和背景会让你的页面中有非常多的图片素材,这样在加载的过程中就会很拖网速,造成页面的用户体验不好,现在div+css的广泛使用,也改变了这一使用习惯,变成了将N多小图标集于一个大图上,再通过div来定位需要用到的图片部分,这样操作能让你的页面少加载非常多的图片素材,大大提升了网页刷新的速度。
  DIV背景定义参数:background 设置元素的背景参数,其中属性依次为 background-color(背景色) | background-image(背景图) | background-repeat(重复方式) | background-attachment(背景图像固定还是滚动) | background-position(背景图像位置)
  关于background-position 定位的问题 在一张大背景下 对某一块的取用时大背景的左上角 为原点(0,0),定位时,→指向x值减小,↓指向 y 值减少 所以在定位中,通常都是两个负数,在对定位的div进行width height 限制 就可以取出自己想要的背景图片了!
  
  通常在使用的时候 样式中定义为 background: url(/templates/v1/images/tips.png) 0 -17px;  这种格式是现在最常用的背景定位方式  //背景的相对路径
  写一段完整的吧:
  
  
  .up_tip {
width: 20px;   //定义高度和宽度
height: 18px;
background: url(http:www.webgamei.com/templates/v1/images/tips.png) 0 -17px;  定位图片位置// 背景的绝对路径
display: inline-block;  //这个比较重要,
  }
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|易采站长站 ( 蒙ICP备14002389-1号 ) |

GMT+8, 2020-4-1 23:34

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表