CSS. 背景属性

下面的文章将帮助你熟悉 background CSS中的属性. 它们通常用于定义元素 background appearance.

有几个CSS属性用于 background effects:

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

和其他样式属性一样 background 可以分配给标签，类或ID.

背景颜色

The background-color属性指定颜色 background 元素的颜色.

	div.block{
		background - color: # 64 a8d8;
		}

颜色通常由:

• 一个十六进制值，比如“#ff0000”
• 一个RGB值-像" RGB (255,0,0) "
• 一个颜色的名字——比如“红色”

背景图像

The background-image属性定义要用作的图像 background for element.

	div.block{
		背景图片:url(图1.jpg);
		}

平铺方式

By default the background 重复图像以完全匹配元素. 换句话说，如果你的图像是100px的宽度和高度，元素是200px的宽度和高度 background 图像将重复4次.

要避免这种行为，请使用 background重复的属性.

	div.block-2{
		背景图片:url(图1.jpg);
		平铺方式:repeat-x;
		}

您可以使用以下属性值:

• repeat-x -水平重复图像
• 重复-y -垂直重复图像
• No-repeat -禁用图像重复

Background-attachment

The background-attachment 属性设置 background 图像是固定的或与页面的其余部分一起滚动.

• scroll – the background 随着页面滚动
• fixed – the background 是固定的，不滚动

背景位置

The background-position属性定义初始 background 根据元素的图像位置. By default the background 图像放在左上角.

	div.block-3{
		背景图片:url(图1.jpg);
		平铺方式:不再重演;
		背景位置:40px;
		}

的第一个值 background-position属性为左偏移量，第二个为垂直偏移量.

您还可以以% (background-position: 100% 0%;)或使用文本值(background-位置:右上方;). 例如，右下角可以定义如下方式(元素尺寸为100px/100px):

	背景位置:右下角;

	背景位置: 100% 100%;

	背景位置: 100px;

简写属性

正如你所知道的，你在CSS文件中输入的符号越多，CSS文件的大小就越大. 大的CSS文件甚至可能减慢 website loading speed. 所以你的代码越短越好.

我们建议您使用以下格式的 background property:

如果您正在使用 background color:

	div.block-3{
		背景:# 64 a8d8;
		}

如果您正在使用 background image:

	div.block-3{
		背景:url(图1.Jpg)左上角不重复滚动; 
		}