Tham khảo tài liệu 'giới thiều ebook html5 và css3 in the real world phần 7', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 170 HTML5 CSS3 for the Real World The background images are layered one on top of the other with the first declaration on top as if it had a high z-index. The final image is drawn under all the images preceding it in the declaration as if it had a low z-index. Basically think of the images as being stacked in reverse order first on top last on the bottom. If you want to declare a background color which you should especially if it s light-colored text on a dark-colored background image declare it last. It s often simpler and more readable to declare it separately using the background-color property. As a reminder the shorthand background property is short for eight longhand background properties. If you use the shorthand any longhand background property value that s omitted from the declaration will default to the longhand property s default or initial value. The default values for the various background properties are listed below background-color transparent background-image none background-position 0 0 background-size auto background-repeat repeat background-clip border-box background-origin padding-box background-attachment scroll Just like for a declaration of a single background image you can include a gradient as one of several background images. Here s how we do it for our advertisement. For brevity only the unprefixed version is shown. The bicycle image would be included similarly in each background-image declaration css excerpt ad2 background-image url . images linear-gradient top rgba 0 0 0 0 rgba 0 0 0 0 37 rgba 0 0 0 0 83 CSS3 Gradients and Multiple Backgrounds 171 rgba 0 0 0 92 rgba 0 0 0 0 98 background-position 50 88 0 0 Note that we ve put the bicycle picture first in the series of background images since we want the bicycle to sit on top of the gradient instead of the other way around. We ve also declared the background position for each image by putting them in the same order as the images were declared in the .
