CSS background-repeat属性

background-repeat属性的定义和用法:
设置或检索对象的背景图像如何铺排填充。
必须先指定background-image属性。 
允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。 
如果只提供1个参数,则用于横向和纵向。特殊值repeat-x和repeat-y除外,因为repeat-x相当于repeat no-repeat,repeat-y相当于no-repeat repeat,即其实repeat-x和repeat-y等价于提供了2个参数值。 
对应的脚本特性为backgroundRepeat。 
语法结构:

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

取值:
repeat:背景图像在横向和纵向平铺,默认值。 
repeat-x:背景图像在横向上平铺。 
repeat-y:背景图像在纵向上平铺。 
no-repeat:背景图像不平铺。 
round:背景图像自动缩放直到适应且填充满整个容器。(CSS3) 
space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3) 
浏览器支持:
1.IE8及更早浏览器不支持为background-repeat定义2个参数值;不支持CSS3新增参数值round | space。 
2.Firefox4.0-8.0不支持为background-repeat定义2个参数值;不支持CSS3新增参数值round | space。 
3.Safari5.1已接受CSS3新增参数值round | space,但还未实现支持。 4.Chrome13.0-16.0已接受CSS3新增参数值round | space,但还未实现支持。
继承性:
无继承性。
实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.mytest {
  height:200px;
  height:200px;
  background-image:url(mytest/div+css/border.jpg);
  background-repeat:repeat-x;
}
</style>
</head>
<body>
<div class="mytest">欢迎来到蚂蚁部落</div>
</body>
</html>

原文地址是: CSS background-repeat属性一章节。

更多css文章可以参阅http://www.softwhy.com/divcss/

时间: 2024-10-12 10:48:22

CSS background-repeat属性的相关文章

CSS background 属性

一.background属性可以设置一个元素的背景样式,当然前提是这个元素有具体的宽高值. 先来一个简单的背景设置: 1 #show-box { 2 width: 800px; 3 height: 500px; 4 background: #000; 5 background-image: url(image url); 6 } 7 </style> 这里只是简单的设置了颜色和背景贴图. 下面让我们来看一下官方的background的属性: 语法格式: background: color po

css中background背景属性概

css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径)  no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径)  no-repeat right top;/*不重复背景图片右上方显示*

css中background背景属性概述

background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ background:url(背景图片路径)

CSS background 属性详解

CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to sep

css background属性

background 简写属性在一个声明中设置所有的背景属性. 所有浏览器都支持 background 属性. 注释:IE8 以及更早的浏览器不支持一个元素多个背景图像. 注释:IE7 以及更早的浏览器不支持 "inherit".IE8 需要 !DOCTYPE.IE9 支持 "inherit". 可以设置如下属性: ?background-color ?background-position ?background-size ?background-repeat ?

jquery 改变css的background rgba属性

废话少说,直接上代码 $("#toolBox ul li").hover(function(){ $(this).css("background","rgba(0,0,0,0.8)"); },function(){ $(this).css("background","rgba(0,0,0,0.65)"); }); 原文地址:https://www.cnblogs.com/agen-su/p/12111633

background复合属性详解(上):background-image

background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本的情况是指定一张图片的url作为背景: <style> .parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(h

HTML CSS——background的认识(一)

今天回归bug时无意间看到了样式表中background属性,现在总结一下: 1.background-color:设置元素的背景色.其值可以为:color-name.color-rgb.color-hex.transparent: 2.background-image:设置元素的背景图像.其值可以为:url(URL).none: 3.background-repeat:设置元素背景图像是否重复以及重复时的重复方式.其值可以为:repeat.repeat-x.repeat-y.no-repeat

CSS的核心属性和浮动

1.CSS属性组成和作用 属性:属性值 1)每个css样式都必须由两部分组成:选择符(Selector)和声明(Decleration) 注:声明又包括属性(Properyt)和属性值(Value) 2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150多个属性: 3)css属性值:属性值包括法定属性值和常规的数值加单位.   div{width:400px;} 2.文本字体属性 1)文本大小:{font-size:12px/14px/16px;} 说明: 1)属性值为

css background 背景知识详解

background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(background-image). css 背景常见属性 background-color background-position background-size background-repeat background-origin background-clip background-attachment