5.2 CSS Image styles

In the colorful network world, a variety of images make up a variety of pages, allowing people to more intuitively feel the information that the Web page wants to convey to the visitors. This section will introduce the CSS to set the style of the picture styles, including the picture border, the way to the OU and graphics and so on, and through an example of a comprehensive grasp of the text and pictures of various applications. First, basic settings As a separate picture, although its own many properties can be directly in the HTML adjustment, but through the unified management of CSS, not only can more precisely adjust the various properties of the picture, but also to achieve a lot of special effects. This section mainly explains the method of setting the basic properties of the picture with CSS, and lays the foundation for further exploration. The basic settings for an image include setting the border of the image, padding and size, and so on. In HTML, you can add a border to a picture directly from the border property value of the tag, control the thickness of the border, border= "1" for a border of 1 pixel thickness, and when the value is set to 0 o'clock, it is displayed without a border. In HTML, the styles you can set are few and monotonous, and the border property of CSS can be used to set a much richer style effect. Sets the border of an image exactly as it does for other elements. For example, on the basis of the previous section, replace the first text paragraph with a , that is, the image element, and then set the following CSS style: lodidance.com img{       border : 1px   gray   dashed ;        margin : 10px   10px   10px   0 ;        padding : 5px ;        float : left ;   }  As shown in effect 1. You can see the basic properties of setting the border style, padding, margins, and floats of an image exactly as you would set the basic properties of other elements. It can also be seen that the CSS box model plays a huge role. In CSS, any object itself is a box, for an image, the image itself is the contents of the box, so the border, the internal and external margins, and so on is a logical part. Figure 1 Setting CSS styles on an image element Please refer to the "5th Chapter/Image/basic.htm" in the Web page Learning Web CSS Tutorial resource. In CSS, you can also set the height and width of the image, as well as using the uniform height and Width properties in the box model. You can use a specific length, such as "100px", or a relative scale, such as "70%", when you set it. Second, background image In CSS, images often appear in the form of backgrounds and are extremely versatile. Later in this tutorial, the reader will also learn how to achieve a number of special effects by using a background image. 1. Setting the background image Set the background color for the element using the Background-color property, as described earlier. In CSS, you can also use an image as the background of an element, such as a background image to set the background of an entire page. Set the background image to use the Background-image property. Still based on the above example, add the following style code to the CSS styles section. body{ Background-image : URL  (bg.gif); } Then prepare an image file as shown in 2. Figure 2 Preparing an image file The upper-left part of the picture is gray, and the lower-right part is white. To make the text on the page not mix with the background, you can set the background color of the p mark to white, as shown in effect 3. Figure 3 The BODY element of the page sets the effect after the background image As you can see, when you set the background image this way, the image is automatically tiled horizontally and vertically in two directions. Other elements can also use a background image, such as changing the background of a H1 tag in an instance from the original background color to using an image as the background, as shown in effect 4. Please refer to the "5th Chapter/Image/backgroud.htm" in the Web page Learning Web CSS Tutorial resource. Figure 4 Effect of H1 title using background image By default, the image is automatically tiled horizontally and vertically in two directions. If you don't want to tile, or just want to tile in one direction, you can use the Background-repeat property to control it. This property can be set to 4 tiling methods. Repeat: tile horizontally and vertically in two directions. No-repeat: Uneven, that is, show only once. Repeat-x: Tile horizontally only. Repeat-y: Tile only in vertical direction. For example, first prepare an image of 5 as shown. Fig. 5 background image of gradient color composition Then, set the following CSS style for the BODY element, and remove the setting for the background image of the H1 title just now. body{ background-image:url(bg-grad.gif); background-repeat:repeat-x; } As shown in effect 6, you can see that the background image is just tiled horizontally. Figure 6 Effect of tiled background image horizontally 3. Set background image and background color at the same time In CSS you can also set the background image and background color, so that the background image is covered by the background image, the background image is not covered to the place in accordance with the background color set. For example, in the BODY element CSS setting above, add a rule: Background-color : #3399ff ;  The effect is shown in 7. Please refer to the "5th Chapter/Image/repeat-image.htm" in the Web page Learning Web CSS Tutorial resource. Figure 7 Setting the background image and background color at the same time This technique is very useful, as you can see the transition of the background color in Figure 7 is very natural, because the background color is set exactly as the color of the bottom row of pixels in the background image, which makes a very natural gradient background. And it is guaranteed that no matter how high the page, the color can extend to the bottom of the page. Lodidance.com The 2nd chapter shows the CSS Zen Garden site 158th Works, you can see this very beautiful bright page background color, it is the use of this method produced. Http://www.csszengarden.com/?cssfile=158/158.css The upper part uses a horizontally tiled image background, and the following is the overall consistent background color. 4. Shorthand for back-volume style attributes Just like font, border and other attributes can be abbreviated in CSS, the CSS properties of the background style can be abbreviated. For example, the following style uses 3 CSS rules. body{ Background-image : URL  (bg-grad.gif); background-repeat : Repeat-x  ; Background-color : #3399FF  ; } It is completely equivalent to the following CSS rule. background : #3399FF url(bg-grad.gif) repeat-x; Note: The attributes are separated by a space. This shorthand form will be used primarily in the chapters later in this tutorial.

Editor: Web Learning Network

This address: http://www.lodidance.com/css/jc/681.html