div+css图像背景基础使用

Applying a background image is easy. Say you want your website to have a nice tiled background.
You can simply apply the image as a background to the body element:
    应用背景图像是很容易的。如果希望网站有一个好看的背景，那么只需将图像作为背景应用于主体元素：
body {
background:url(pattern.gif);
}
The default browser behavior is to repeat background images horizontally and vertically so that the image tiles across the whole of the page. For more control you can choose whether your background image tiles vertically, horizontally, or not at all.
    浏览器的默认行为是水平和垂直地重复显示这个图像，让图像平铺在整个页面上。可以选择背景图像是垂直平铺、水平平铺，还是根本不平铺。
Gradients are very fashionable at the moment so you may want to apply a vertical gradient to your page instead. To do this, create a tall but narrow gradient graphic. You can then apply this graphic to the body of the page and let it tile horizontally:
    目前简便非常时髦，你可能希望在页面上应用垂直渐变。为此，需要创建一个很高但很窄的渐变图像，然后将这个图像应用于页面的主体并让它水平平铺：
body {
background: #ccc url(gradient.gif) repeat-x;
}
Because the gradient has a fixed height, it will stop abruptly if the content of the page is longer than the height of the image. You could choose to create a really long image, possibly one that fades to a fixed color. However, it is always difficult to predict how long a page will become. Instead, simply add a background color as well. Background images always sit on the top of the background color, so when the image runs out the color will be displayed. If you choose a background color that is the same as the bottom of the gradient, the transition between image and background color will be seamless.
    因为这个渐变图像的高度是固定的，所以如果页面内容的长度超过了图像的高度，那么渐变就会突然中止。可以创建一个非常长的图像，逐渐变化到一个固定的颜色。但是，很难预测页面会有多长。实际上，只需再添加一个背景颜色。背景图像总是出现在背景颜色的上面，所以当图像结束时，颜色就会显示出来了。如果选择的背景颜色与渐变的颜色相同，那么图像和背景颜色之间的转换就看不出来了。
Tiling images can be useful in some situations. However, most of the time, you will want to add non-tiled images to your page. For instance, say you want your web page to start with a large branding image. You could simply add the image directly into the page, and in many situations this would be the correct thing to do. Yet if the image contains no information and is purely presentational, you may want to separate the image from the rest of your content. You can do this by creating a hook for the image in your HTML and applying the image using CSS. In the following example I have added an empty div to the markup and given it an ID of branding. You can then set the dimensions of the div to be the same as the branding image, apply it as a background, and tell it not to repeat.
    平铺图像在某些情况下很有用。但是，在大多数情况下，希望在页面上添加不进行平铺的图像。例如，假设希望在页面的开头显示一个大的品牌图像，那么只需将图像直接添加到页面上，在许多情况下这样做就够了。但是，如果图像不包含信息，是纯装饰性的，那么可能希望将图像从其余内容中分离出来。实现方法是在HTML中为这个图像创建一个“钩子”,然后使用CSS应用这个图像。在下面的实例中，我在标记中添加一个空的div并且给它设置ID branding。然后可以将这个div的尺寸设置为与品牌图像相同，作为背景应用图像并指定不进行平铺。
#branding {
width: 700px;
height: 200px;
background:url(/images/branding.gif) no-repeat;
}
Lastly, it is possible to set the position of your background image. Say you want to add a bullet to every headline on your site, as shown in Figure 3-1. You could do something like this:
    还可以设置背景图像的位置。假设希望在站点的每个标题上添加一个符号，如图1所示。可以编写下面这样的代码：
h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat left center;
}

图1
The last two keywords indicate the positioning of the image. In this case, the image will be positioned to the left of the element and vertically centered. As well as using keywords,you can set a background image’s position using units such as pixels or percentages.