css/3 背景详解

CSS 属性定义背景效果:

• background   (简写形式)
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

• 十六进制 - 如："#ff0000"
• RGB - 如："rgb(255,0,0)"
• 颜色名称 - 如："red"

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

---

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body {background-image:url('paper.gif');}

---

背景图像平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示: 

水平、垂直方向都平铺

body
{
background-image:url('gradient2.png');
}

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

只水平方向平铺

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

如果图像只在垂直方向平铺 (repeat-y), 页面背景会更好些:

只垂直方向平铺

body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}

如果你不想让图像平铺，你可以使用 background-repeat 属性:

图片不平铺

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

值说明repeat背景图像将向垂直和水平方向重复。这是默认repeat-x只有水平位置会重复背景图像repeat-y只有垂直位置会重复背景图像no-repeatbackground-image不会重复inherit指定background-repea属性设置应该从父元素继承

---

背景图像定位

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

background-position属性设置背景图像的起始位置。(默认是  0%  0%)

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）".

实例

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

值描述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％。你可以混合使用％和positionsinherit指定background-position属性设置应该从父元素继承

---

背景图像固定/滚动

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

实例

如何指定一个固定的背景图像：

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

值说明scroll背景图片随页面的其余部分滚动。这是默认fixed背景图像是固定的inherit指定background-attachment的设置应该从父元素继承

---

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background":

实例

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.

CSS3 属性定义背景效果:

CSS3background-size 属性：

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。

CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

你指定的大小是相对于父元素的宽度和高度的百分比的大小。

重置背景图像大小：
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
伸展背景图像完全填充内容区域：
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}

 

值

描述

length

设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"

percentage

将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

cover

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain

此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

 

---

CSS3的background-Origin属性（用于图片背景）：

background-Origin属性指定了背景图像的位置区域。

content-box,padding-box,和 border-box区域内可以放置背景图像。

 

在 content-box中定位背景图片：

div{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

CSS3 background-clip 属性（用于颜色背景）：

指定绘图区的背景：
div
{
background-color:yellow;
background-clip:content-box;
}

值

说明

border-box

默认值。背景绘制在边框方框内（剪切成边框方框）。

padding-box

背景绘制在衬距方框内（剪切成衬距方框）。

content-box

背景绘制在内容方框内（剪切成内容方框）。

 

CSS3 多个背景图像（背景图片重叠）：

CSS3 允许你在元素中添加多个背景图像。

在 body元素中设置两个背景图像：

body{ 
background-image:url(img_flwr.gif),url(img_tree.gif);

值

描述

length

设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"

percentage

将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

cover

此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain

此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。