设为首页收藏本站

九九站长,站长论坛,discuz教程

 找回密码
 立即注册
查看: 1106|回复: 0
收起左侧

[div+css技术] css背景属性—background-position的用法!

[复制链接]

97

主题

165

帖子

1445

积分

九八级-网站编辑

Rank: 8Rank: 8

交易币
757 枚

活跃会员热心会员推广达人宣传达人突出贡献荣誉管理

发表于 2013-5-4 22:00:04 | 显示全部楼层 |阅读模式

注册加入九九站长论坛,一起交流,学习,分享网站技术,资源等!

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

x
    前面我讲过说每个标签都是一个容器,都是以块状来显示的,包括行内元素也是,他显示的时候也是一个块,那么一个块,不管是长方形还是正方形,都可以说是个九宫格,就是有上下左右中,如下:
1上:top  2    3
左:left  4中:center   5右:right   6
   7下:bottom    8    9

比如一个div元素,他的宽是200,高是100,那么他在显示的时候就像上面那个表格一样的,就是一个长方形,background-position就是用来控制背景图片显示的位置的,当然前提是背景图片不平铺,比如说你的图片很小,宽是50,高是20,那么用这个图片来当做这个div的背景,那么要显示在哪里呢,就用background-position:来控制
比如说要让图片
显示在九宫格的  1  的位置,属性值就是    background-position:left top;               
显示在九宫格的  2  的位置,属性值就是    background-position:center top                     
显示在九宫格的  3  的位置,属性值就是    background-position:right top              
显示在九宫格的  4  的位置,属性值就是    background-position:left center            
显示在九宫格的  5  的位置,属性值就是    background-position:center center        
显示在九宫格的  6  的位置,属性值就是    background-position:center  right   
剩下的你们自己写,下去写着看下,看对不对,

还有种位置的写法,用的比较多的,比如像:  background-position:20px  center     从左往右移20像素,然后居中   
background-position:20px  50px      从左往右移20px,从上往下移50px的位置显示,
这个需要我们的计算
总之一句话,位置是先算我们的水平位置,在算我们的y轴的位置!

         
总结css背景属性的使用,css背景属性有很多参数,可以简写成一个background,顺序如下:
background:颜色   图片  平铺  位置
如:   background:red ("123.jpg") no-repeat  center  center;
像上面这样简写成一句,先是颜色,然后空格,图片,然后空格,平铺的位置,空格,最后是显示的位置,如果其中哪一个没有可以不写,比如背景颜色,如果不需要定义背景颜色,那么就直接不写颜色就可以了!

特别无聊,来九九站长看下教程!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

网上报警岗亭图标

Archiver|手机版|小黑屋|九九站长网 ( 渝ICP备13002263 )  
站长论坛   建站教程   discuz教程   discuz模板下载   网站优化
九九站长论坛版权所有:© 2001-2015;如有侵犯你的权利,请告知!

网警备案图
快速回复 返回顶部 返回列表