• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • background-repeat

    background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

    示例

    background-repeat: repeat-x;
    background-repeat: repeat;
    background-repeat: space;
    background-repeat: round;
    background-repeat: no-repeat;
    background-repeat: space repeat;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持background-repeat

    语法:

    background-repeat:repeat-x | repeat-y |[repeat | no-repeat | space | round]

    取值:

    • repeat-x:背景图像在横向上平铺
    • repeat-y:背景图像在纵向上平铺
    • repeat:背景图像在横向和纵向平铺
    • no-repeat:背景图像不平铺
    • round:背景图像自动缩放直到适应且填充满整个容器。(CSS3)
    • space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)

    说明:

    设置或检索对象的背景图像如何铺排填充。必须先指定<background-image>属性。

    • 允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。
    • 如果只提供1个参数,则用于横向和纵向。特殊值repeat-x和repeat-y除外,因为repeat-x相当于repeatno-repeat,repeat-y相当于no-repeatrepeat,即其实repeat-x和repeat-y等价于提供了2个参数值
    • 对应的脚本特性为backgroundRepeat
    默认值repeat
    适用于所有元素
    继承性
    动画性
    计算值指定值

    取值

    <repeat-style>
    单值语法是完整的双值语法的简写:
    单值等价于双值
    repeat-xrepeat no-repeat
    repeat-yno-repeat repeat
    repeatrepeat repeat
    spacespace space
    roundround round
    no-repeatno-repeat no-repeat
    在双值语法中,第一个值表示水平重复行为,第二个值表示垂直重复行为。下面是关于每一个值是怎么工作的具体说明:
    repeat

    图像会按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪,如果它的大小不合适的话.

    space

    图像会尽可能得重复,但是不会裁剪。第一个和最后一个图像会被固定在元素(element)的相应的边上,同时空白会均匀地分布在图像之间.background-position属性会被忽视,除非只有一个图像能被无裁剪地显示。只在一种情况下裁剪会发生,那就是图像太大了以至于没有足够的空间来完整显示一个图像.

    round

    随着允许的空间在尺寸上的增长,被重复的图像将会伸展(没有空隙),直到有足够的空间来添加一个图像。当下一个图像被添加后,所有的当前的图像会被压缩来腾出空间。例如,一个图像原始大小是260px,重复三次之后,可能会被伸展到300px,直到另一个图像被加进来。这样他们就可能被压缩到225px.

    译者注:关键是浏览器怎么计算什么时候应该添加一个图像进来,而不是继续伸展.

    no-repeat

    图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖).那个没有被重复的背景图像的位置是由background-position属性来决定.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{width:200px;
    	height:100px;
    	background-image:url("images/bird.png");
    	background-repeat:no-repeat;
    	}
    div{
    	width:200px;
    	height:150px;
    	background-image:url("images/bird.png");
    	background-repeat:repeat-y;
    
    }
    </style>
    </head>
    <body>
    	<h3>图片不重复:</h3>
    		<p></p>
    	<h3>图片沿y轴重复:</h3>
    	<div></div>
    </body>
    </html>

    效果图: