CSS background 属性(背景属性)
CSS background 属性(背景属性)
标签定义及使用说明
背景缩写属性可以在一个声明中设置所有的背景属性。
可以设置的属性分别是:background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。
各值之间用空格分隔,不分先后顺序。可以只有其中的某些值,例如 background:#FF0000 URL(smiley.gif); 是允许的。
值 | 说明 | CSS |
---|---|---|
background-color | 指定要使用的背景颜色 | 1 |
background-position | 指定背景图像的位置 | 1 |
background-size | 指定背景图片的大小 | 3 |
background-repeat | 指定如何重复背景图像 | 1 |
background-origin | 指定背景图像的定位区域 | 3 |
background-clip | 指定背景图像的绘画区域 | 3 |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
background-image | 指定要使用的一个或多个背景图像 | 1 |
实例
在一个div元素中设置多个背景图像(并指定他们的位置):
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
background-color:设置或检索对象的背景颜色。
color 指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色,应该从父元素继承
实例:
body { background-color:yellow; }
h1 { background-color:#00ff00; }
p { background-color:rgb(255,0,255); }
background-image:设置或检索对象的背景图像。
元素的背景是元素的总大小,包括填充和边界(但不包括边距)。
默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,可以使用背景色带代替。
值 | 说明 |
---|---|
url('URL') | 图像的URL |
none | 无图像背景会显示。这是默认 |
linear-gradient() | 创建一个线性渐变的 "图像"(从上到下) |
radial-gradient() | 用径向渐变创建 "图像"。 (center to edges) |
repeating-linear-gradient() | 创建重复的线性渐变 "图像"。 |
repeating-radial-gradient() | 创建重复的径向渐变 "图像" |
inherit | 指定背景图像应该从父元素继承 |
实例:
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
background-position:设置或检索对象的背景图像位置。必须先指定background-image属性。
注意对于这个工作在Firefox和Opera,background-attachment必须设置为 "fixed(固定)".
background-position:center;
background-position: 80% 20%;
background-position: 50px 100px;
值 | 描述 |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom |
如果仅指定一个关键字,其他值将会是"center" |
x% y% | 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0% |
xpos ypos | 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions |
inherit | 指定background-position属性设置应该从父元素继承 |
实例:
<style>
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
background-repeat:设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。
设置如何平铺对象的 background-image 属性。
默认情况下,重复background-image的垂直和水平方向。
提示: background-position属性设置背景图像位置。如果指定的位置是没有任何背景,图像总是放在元素的左上角。
值 | 说明 |
---|---|
repeat | 背景图像将向垂直和水平方向重复。这是默认 |
repeat-x | 只有水平位置会重复背景图像 |
repeat-y | 只有垂直位置会重复背景图像 |
no-repeat | background-image不会重复 |
inherit | 指定background-repea属性设置应该从父元素继承 |
实例:
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
background-size:检索或设置对象的背景图像的尺寸大小。
background-size属性指定背景图片大小。默认值:auto
background-size:80px 60px;
background-size:50% 100%;
值 | 描述 |
---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动) |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
background-attachment:设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。
默认值: scroll。背景图片随着页面的滚动而滚动。
background-attachment:fixed;
background-attachment:local;
值 | 描述 |
---|---|
scroll | 背景图片随着页面的滚动而滚动,这是默认的。 |
fixed | 背景图片不会随着页面的滚动而滚动。 |
local | 背景图片会随着元素内容的滚动而滚动。 |
initial | 设置该属性的默认值。 阅读关于 initial 内容 |
inherit | 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容 |
实例:
body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
background-origin: S设置或检索对象的背景图像计算background-position时的参考原点(位置)。
background-origin:border-box; (外部)
background-origin:content-box;(相对于内容)
值 | 描述 |
---|---|
padding-box | 背景图像填充框的相对位置 |
border-box | 背景图像边界框的相对位置 |
content-box | 背景图像的相对位置的内容框 |
background-clip:指定对象的背景图像向外裁剪的区域。
background-clip属性指定背景绘制区域。
值 | 说明 |
---|---|
border-box | 默认值。背景绘制在边框方框内(剪切成边框方框)。 |
padding-box | 背景绘制在衬距方框内(剪切成衬距方框)。 |
content-box | 背景绘制在内容方框内(剪切成内容方框)。 |
<style>
/**没有背景剪裁 (border-box没有定义):**/
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
}
/**background-clip: padding-box: **/
#example2 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: padding-box;
}
/** background-clip: content-box: **/
#example3 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
</style>
共有 0 条评论