CSS3 Background-image Attribute Instance detailed

This article mainly introduces the CSS3 implementation of a P set multiple background images and Background-image properties, while the CSS3 background gradient also made a detailed explanation, horizontal gradient, upper left corner gradient and so on, the need for friends can refer to the next

Introduction

Before the page layout, a p can only set a background picture, set multiple backgrounds, to use multiple p nested to achieve, so compatibility is better. This method is recommended if your website requires a browser-compatible version. The advent of CSS3 solves the problem that a P can only set a background, so that a p may set multiple background images. Background-image can also set linear gradients, and so on.

Off Topic

About CSS3 's background, the function is very powerful, has many properties, like Background-size and so on, these attributes can write a blog to tell. About the other properties of Css3background, a blog will be later to tell the individual!

Css3/css1 Background-image Properties

Grammar:

background-image:<bg-image> [, <bg-image>]*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> Default value: None

Value:

None: No background map. < URL: Use an absolute or relative address to specify the background image. < Linear-gradient>: Creates a background image with a linear gradient. (CSS3) < Radial-gradient>: Creates a background image using a radial (radioactive) gradient. (CSS3) < Repeating-linear-gradient>: Creates a background image with a repeating linear gradient. (CSS3) < Repeating-radial-gradient>: Creates a background image with a repeating radial (radioactive) gradient. (CSS3)

Description :

Sets or retrieves the background image of an object.
If set background-image , it is also recommended that the author settings background-color be used to maintain a certain contrast with the text when the background image is not visible.
The corresponding script attribute is backgroundImage .

Compatibility:

IE8 and earlier browsers do not support CSS3 background-image, that is, multiple backgrounds are not supported and gradients are used as background images.
IE9 not supported CSS3 new parameter value:< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient > as background image.
OPERA11.50-11.51 does not support CSS3 new parameter values:< radial-gradient > |< repeating-radial-gradient > as background image.

Writing:

CSS3 setting multiple background images

CSS3 set multiple background images, you can write as follows:

Background:url ("haoroomscss1_s.jpg") 0 0 no-repeat,
URL ("haoroomscss2_s.jpg") 200px 0 no-repeat,
URL ("haorooms.jpg") 400px 201px no-repeat;
You can also write this:

Background-image:url ("1.jpg"), url ("2.jpg"), url ("3.jpg");
Background-repeat:no-repeat, No-repeat, no-repeat;
background-position:0 0, 200px 0, 400px 201px;

CSS3 Background Gradient

Standard notation

Background-image:linear-gradient (  [<angle> | <side-or-corner>,]? <color-stop> [, < color-stop>]+);

The above CSS syntax we often see, may be someone can not understand the specific meaning, in fact, some of the above symbolic meaning and regular expressions have many similarities:

[] represents a character class in the regular, and here you can understand it as a small unit.

| Represents a candidate. That means "or", either in front or on the back.

? As a quantifier, 0 or 1, the implication is that you can not specify the direction, the direct gradient to go. For example:

Background:linear-gradient (red, yellow);

is the red and yellow stripe effect from the top down.

+ is also a quantifier, representing 1 or more. Therefore, terminating the color is indispensable. For example: Linear-gradient (red) is soy sauce life, whiteboard.

<> is a keyword that is primarily for developers to know what to put in place.

Horizontal gradient

{background-image:linear-gradient (left, red 100px, Yellow 200px);}

Effects such as:

Upper left corner gradient

That from (100px, 100px) to (200px, 200px) should be starting from the upper left corner, the following wording:

{Background-image:linear-gradient (left top, red 100px, Yellow 200px);}

The effect is as follows

Combination of gradient direction notation:

left, right, top, bottom, left top, left bottom, right top, right， bottom
Respectively, from left to right, from right to left, from top to bottom, down to top, from top left to bottom right, from ... (All understand, not all write)
Of course, can also use angle angle to write!

{background-image:linear-gradient ( -45deg, Red 100px, Yellow 200px);}

The concrete style everybody can try to write, look! In many cases, use it to know!

Note: There are a number of effects added-webkit prefixes and-moz prefixes will show different!

For example:

background-image:-webkit-linear-gradient(-45deg, red, yellow)
And

background-image:linear-gradient(-45deg, red, yellow)
The gradient direction under Chrome is actually the opposite! But 45deg is normal. The same is true under the Firefox browser, with a prefix and no prefix in the opposite direction! What happened

The reason is very simple, CSS3 is still a draft stage!

From the browser to remove the prefix before and after the changes can be inferred, before, the world's gradient coordinates are consistent with Photoshop, but later, for some reason, modified.

For what reason, according to my cursory search, may be associated with one of the following keywords: animation/transition animation, Write-mode writing direction, Flex box model, and radial-gradient gradient. Not in-depth study here!

Prefix compatible

The basic wording is as follows:

Background-image:linear-gradient (Top, #fff, #dededc);

However, to be compatible, it is sometimes necessary to write multiple prefixes, which become as follows:

Background-image:-ms-linear-gradient (Top, #fff, #dededc);    Background-image:-moz-linear-gradient (Top, #fff, #dededc);    Background-image:-webkit-gradient (linear, left top, left bottom, from (#fff), to (#dededc));    Background-image:-webkit-linear-gradient (Top, #fff, #dededc);    Background-image:-o-linear-gradient (Top, #fff, #dededc);    Background-image:linear-gradient (Top, #fff, #dededc);

About "CSS3 implementation of a P set multiple background images and Background-image Properties" write here today, there are problems can communicate with each other, come on!