Add a background image summary to a Web page

1. Fixed width and variable width fillet box

Method One: For the new browser, directly with the Border-radius property

Method Two: Apply to the old browser, IE6, etc.

For fixed-width rounded boxes, you need two images, one for the top of the box and one for the bottom of the box.

For variable-width rounded boxes, sliding door technology is required (as the size of the box increases, more parts of the large image are exposed, so that the effect of the box extension is achieved), this method requires four images (Top-left,top-right,bottom-left, Bottom-right), Bottom-left applied to the main box div,bottom-right applied to the outer div,top-left applied to the inside of the div,top-right applied to the caption

For the variable-width peak angle, create a curved bitmap angle mask, cover the background color that is being used, form the effect of the curved frame, for the small curve effect is better, but for the large curve, there will be jagged. Like a variable-width rounded box, you need 4 elements to apply 4 corner masks.

Method Three: The use of multiple background images, the method is also four background images, the advantage is to eliminate useless tags, Firefox and opera's latest version support this property, IE does not support.

Method Four: Use CSS3 new feature boreder-image, this property allows to specify an image as the border of the element, the image is divided into 9 parts, the 9 parts how to divide, according to Border-image settings, there are 3 ways, PX, percentage. See Border-image properties for more details (http://www.w3school.com.cn/cssref/pr_border-image.asp)

2. Projection

Method One: For the new browser, directly with the Box-shadow attribute (http://www.w3school.com.cn/cssref/pr_box-shadow.asp)

Method Two: Apply to all browsers, the implementation method is to first apply a large projection image to the background of the container Div, and then use the negative margin of the image cheap

Method Three: The projection method from Clagnut, instead of using a negative margin offset image, uses relative positioning to offset the image.

3. Opacity

Method One: Use the Filter property (http://www.runoob.com/cssref/css3-pr-filter.html)

Method Two: Background-color: set with Rgba

PNG transparency

One of the biggest advantages of the A.png file format is that it supports alpha transparency, the first rule uses a proprietary filter to load PNG and applies alpha transparency, and the original background image is still displayed, so the second rule is to hide the original background image.

B. Using the IE PNG fix technology, use proprietary CSS extension-behavior (behavior)

4.CSS Parallax Effect

Parallax scrolling is achieved by creating several different background images, each with a different location.

5. Image replacement

When you use a text image, you don't want to embed it directly into the page, and you have an image replacement. Image substitution is to add text as usual, then use CSS to hide the text and display the background image in its place. In this way, search engines can still search for HTML text, and if you disable CSS, the text will be displayed.

Implementation method

A.fir, the first and most popular, put the text you want to replace within the span tag, and then apply the replacement image as a background image to the caption element, and set the display value of span to none. The downside is that many screen readers automatically ignore elements with a display value of none or visibility value of hidden, so this text is completely ignored.

B.phark, a very large negative text indent on the title, the disadvantage is that the text is not displayed when the image is turned off but the CSS is turned on.

C.SIFR, replacing text with flash files

Add a background image summary to a Web page