当前位置:我的电脑网 > MyDiannao.Com > 服务器配置

css background-repeat no-repeat的参数属性

定义和用法

background-repeat 属性设置是否及如何重复背景图像。

默认地,背景图像在水平和垂直方向上重复。

 

实例

body
  {
  background-image: url(mydiannao_com.gif);
  background-repeat: repeat-x;
  }

 

提示和注释

提示:背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。

css no-repeat后面的数字是什么意思,比如css no-repeat 0 0,css 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的部分会隐藏不会显示出来

以这个为例:background:url(../images/l_r_btn.gif) no-repeat -8px 0;
background:url(../images/l_r_btn.gif) // 图片地址
no-repeat //不重复
下面是尺寸,以图片的左上角为 0 0 ,
-8px // X 轴 向右移 8 PX
0 // Y 轴 不变

不过,这样写的时候一定要加上 width,height 不然,一样会超出尺寸

背景图片的显示是默认从左到右,从上到下的。所以会有个默认的左上角作为图片的展示的起始点,后面的数值是更改那个默认的起始点。

分享到:
[] [返回上一页]
Copyright © 2010 - 2017MyDiannao.Com. All Rights Reserved .
粤ICP备10200428号