CSS background 属性(背景属性)

CSS background 属性(背景属性)

20200606002

标签定义及使用说明

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是: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>

版权声明:
作者:网络知识大全
链接:http://www.maycasi.com/73.html
来源:MAYCASI网络知识大全
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>