Shulou(Shulou.com)06/03 Report--

This article mainly introduces "introduction to the usage of CSS3 background attributes". In daily operation, I believe many people have doubts about the introduction of CSS3 background attributes. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "introduction to the usage of CSS3 background attributes"! Next, please follow the editor to study!

This article introduces the new attributes and gradient functions (gradient) about the background (background) to see which new background element controls and the implementation of a variety of gradient effects are provided.

Background Background

1. Background is an abbreviation for multiple background attributes.

Backgrounf: [background-color] | [background-image] | [background-position] [/ background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

Note: if there is a background-size value, it needs to be closely followed by background-position and separated by "/"

Background-image

2. The background-image attribute allows you to add multiple background images.

Different background images and images are separated by commas, and the first one is shown at the top of all the pictures. Set up multiple png images, you can get the effect of multiple background images superimposed.

Background-image: url (".. /.. / media/examples/lizard.png"), url (".. /.. / media/examples/star.png")

Suggestion: when using a background image, it is best to set the background color (background-color) as the planB when the background image is not supported.

Background-size

Before CSS3, the size of the background image was determined by the actual size of the image.

3. The background-size attribute can specify the size, pixel or percentage of the background image.

The size of the percentage relative to the width and height of the parent element.

The picture can retain its original size, or stretch to a new size, or zoom to the size of the element's free space while maintaining its original ratio:

Cover: keep the aspect ratio of the image, zoom the background image to completely cover the background area, the background picture may not be seen.

Contain: keep the aspect ratio of the image, zoom the background image to fit fully into the background area, which may be partially blank.

A value: this value specifies the width of the picture, and the height of the picture is implicitly auto

Two values: the first value specifies the width of the picture, and the second value specifies the height of the picture

Background-origin

Background-origin specifies the background relative area that specifies the origin of the background image attribute.

Note: when using background-attachment as fixed, this attribute will be ignored and has no effect.

At this point, the study of "introduction to the usage of CSS3 background attributes" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.