新闻观点

"no-repeat”后面两位数字是什么意思

2013/3/14 0:13:56   |   阅读次数:

在学习div+css布局时,或是看比人写的比较好的源文件是,会发现一个看不懂的东西,例如
background:url(../images/l_r_btn.gif) no-repeat -8px 0;这个no-repeat后面的两个数字表示什么意思呢,经过我查阅了相关资料,并自己得到证实
现公布结果如下:

个no-repeat后面的两个数字,第一个代表水平位置,第二个代表垂直位置,如果以十字线为例的话,是不是图片的左上角顶点在十字线的原点处,比如这个图,为什么background:url(../images/l_r_btn.gif) no-repeat 0 0;就是显示第一个小图,background:url(../images/l_r_btn.gif) no-repeat -8px 0;就是显示第二个小图
背景图片的位置,那两个数字是图片左上角到div(以div为例)左上角的偏移量。第一个数字正数向左,负数向右;第二数字正数向下,负数向上;首先将背景图的左上角与div的左上角重合,0 0表示不动,8px 0:表示将背景图向左移动8像素,-8px 0:表示将背景图向右移动8像素,0 8px:背景图向下移动8像素,0 -8px:背景图向上移动8像素;8px 8px:背景向左移动8像素再向下移动8像素;超出div的部分会隐藏不会显示出来。

不知各位看明白我的解释没有,自己也可以动手做一下小实验,先设置第一个数字,由负到正,然后设置第二个,你就可以清晰的明白了,实际在div+css布局时,多是在设计网站的栏目背景时使用,效果很不错哦,大家可以亲自试试。
网站原创自太原心诺网络 网站建设就找心诺网络!

相关新闻
首页 | 关于我们 | 网站建设 | 网站优化 | 服务范围 | 案例作品 | 信息资讯 | sitemap