CSS11：背景图像应用

背景图像 background-image: url(图片路径);

默认是全部平铺的

div {
    background-image: url("images/tx.jpg");
}

• background-repeat           背景图像的重复方式

  background-repeat: repeat-x;        水平平铺

div {
    background-image: url("images/tx.jpg");
    background-repeat: repeat-x;
}

        background-repeat: repeat-y;        垂直平铺 

div {
    background-image: url("images/tx.jpg");
    background-repeat: repeat-y;
}

        background-repeat: no-repeat;        不重复

div {
    background-image: url("images/tx.jpg");
    background-repeat: no-repeat;
}

 

• background-position        背景图像的位置

可能的值

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。

background-position: 200px 10px;
background-position: 20% 70%;
background-position: top left;

 

• background-size              背景图像的尺寸

可能的值

值	描述
length	设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-size: 200px 200px;
background-size: 50% 40%;
background-size: cover;
background-size: contain;

背景 background

可以通过 background 声明所有的背景属性，可以设置的属性如下：

• background-color        规定要用的背景颜色
• background-position   规定背景图像的位置
• background-size         规定背景图像的尺寸
• background-repeat     规定如何重复背景图像
• background-origin       规定背景图像的定位区域
• background-clip          规定背景的绘制区域
• background-attachment           规定背景是否固定或者随着页面的其余部分滚动
• background-image       规定要使用的背景图像

如果不设置其中某个值也不会出问题。

/* background: 颜色 图片路径 图片位置 重复方式 */
background: red url("../images/tx.jpg") 200px 10px no-repeat;

/* 上面的一条声明等价于下面的一组声明 */
background-color: red;
background-image: url("../images/tx.jpg");
background-position: 200px 10px;
background-repeat: no-repeat;