Proficient in CSS advanced Web standard solutions: background image Basics

Now that you have mastered the theory, we start to apply it to practice. Today's Web is a media with rich visual effects. Simple image tags enable web designers to transform interesting documents into a rich graphic browsing experience. Graphic designers quickly master the Image Tag (originally used to add visual content to a website) and use it as a way to visually modify pages. In fact, if the Image Tag is not invented, there may be no such profession as a web designer.

Unfortunately, the abuse of image tags leads to a messy page caused by purely decorated images. Fortunately, CSS enables us to display images on the page without making the images part of the tag. The method is to add an image as the background to an existing element. This chapter describes how to use background images to create interesting and useful technologies through a series of practical examples.

In this chapter, you will learn:

□Fixed width and variable width rounded corner frame.

□Sliding door technology.

□Top corner.

□Css shadow.

□Used for PNG transparency Support of IE 5.x and later versions.

□Image replacement.

3.1 Background Image Basics

The application background image is very easy. If you want the website to have a nice background, you only need to apply the image as the background to the main element:

Body {
Background: url(pattern.gif );
}

By default, the browser repeatedly displays the image in a peaceful and vertical manner, so that the image is tiled across the page. You can choose whether to tile the background image vertically, horizontally, or not at all.

Currently, the gradient is very fashionable. You may want to apply the vertical gradient on the page. To do this, you need to create a very high but narrow gradient image, then apply the image to the subject of the page and make it tiled horizontally:

Body {
Background: # CCC url(gradient.gif) Repeat-X;
}

Because the height of the gradient image is fixed, if the length of the page content exceeds the height of the image, the gradient will suddenly terminate. You can create a very long image and gradually change it to a fixed color. However, it is difficult to predict how long the page will be. In fact, you only need to add another background color. The background image always appears on the background color, so when the image ends, the color will be displayed. If the selected background color is the same as the color at the bottom of the gradient, the conversion between the image and the background color cannot be seen.

Tiled images are useful in some situations. However, in most cases, you want to add images that are not tiled on the page. For example, if you want to display a large brand image at the beginning of a webpage, you only need to add the image directly to the page. In many cases, this is enough. However, if the image does not contain information and is purely decorative, you may want to separate the image from the rest of the content. The method is to create a "hook" for the image in HTML and apply the image using CSS. In the following example, I add an empty DIV in the tag and Set ID branding for it. Then, you can set the size of the DIV to be the same as that of the brand image, apply the image as the background, and specify not to tile.

# Branding {
Width: 700px;
Height: 200px;
Background: URL (/images/branding.gif) No-Repeat;
}

[1] [2]

You can also set the location of the background image. Assume that you want to add a symbol to each site title, as shown in 3-1. You can write the followingCode:
H1 {
Padding-left: 30px;
Background: URL (/images/bullet.gif) No-repeat left center;
}

 

Figure 3-1 use a background image to create a symbol

The last two keywords indicate the position of the image. In this example, the image is positioned on the left of the element and vertically centered. In addition to keywords, you can also set the position of the background image using pixels or percentages.

If you use pixels to set the background position, the distance from the upper left corner of the image to the upper left corner of the element is the specified number of pixels. Therefore, if the specified vertical and horizontal positions are both 20 pixels, the upper left corner of the image appears at 20 pixels under the upper left corner of the element, and the left side is 20 pixels. However, the working method for background locating using percentages is not the same. Percentage positioning does not position the upper left corner of the background image, but uses a corresponding point on the image. Therefore, if the specified vertical and horizontal positions are both 20%, the image is actually located at the 20% point from the upper left corner to the 20% point from the upper left corner of the parent element (see Figure 3-2 ).

Figure 3-2 uses the upper left corner of the image to locate the background image using pixels. When using percentages for background image positioning, use the corresponding position on the Image

If you want to use percentages instead of keywords to implement the preceding example, set the vertical position to 50%, which will center the symbolic image vertically:

H1 {
Padding-left: 30px;
Background: URL (/images/bullet.gif) No-repeat 0 50%;
}

Do not mix units such as pixels or percentages with keywords. This seems meaningless, and many modern browsers intentionally ignore this rule. However, mixed use of unit and keyword may cause errors in some browsers, and may invalidate the page. Therefore, it is best not to mix units and keywords.

Although background images are like easy-to-understand concepts, they constitute the foundation of many advanced CSS technologies.

Buy "proficient CSS: advanced Web standard solution": http://shop.csai.cn/itbook/itbookinfo.asp? Lbbh= 10014414

[1] [2]