Background composite Properties Detailed (UP): Background-image

Background compound attribute is a very complex property, the pattern is very many, the more magical is CSS3

Support multi-image background, this article first talk about the Background-image property, the other background properties will be summarized in the subsequent articles.

First, the most basic situation is to specify the URL of a picture as the background:

<style>    . Parent{           height:200px;       Width:500px;       Border: 10px solid RGB (123);       background-color: #bff;       background-image:url (halfrombes.png);    } </style>

The effect is as follows (the browser default background image is tiled repeatedly):

Second: Specify the gradient as the background:

      Background-image:linear-gradient (to left top, red, blue);

The effect is as follows (from the lower-right corner to the upper-left corner, from a red gradient to blue):

In addition to the linear gradient, there is a radial gradient, which is the gradient that radiates from the center outward. Modern browsers (including ie10+) support.

The specific syntax is not discussed here, because the space is too long, please go to get more detailed information:

Mdn#linear-gradient,

Mdn#radial-gradient.

Third, the use of Base64 encoded pictures:

Take the first example of this article as an example:

The base64 encoding of the graph is:

"data:image/png;base64,ivborw0kggoaaaansuheugaaaa4aaaaecayaaaacni9kaaaaaeleqvq4jcxtmq4aebaeqh/ yj69vq31ctswrc26ddcvvu1ntzvkqq+vcyuudpmupfwjece9yoibhhg+ Usoxwocszna87xmv2ah4rbbm3enmvb5fdexc3qct3uems30eujdgotxh0vrtri9j3utwnewiaaaaasuvork5cyii= "

Point the picture URL to the image encoding, and you'll get the same effect as the first example.

Modern browser support is excellent, ie8+ support, Base64 encoding specific support situation: Browser support for base64 encoding

As you can see, the Base64 code begins with the data: indicates what type of picture, such as Data:image/png, is a PNG image, followed by ' Base64 ', the Base64 encoding format, followed by the encoded information of the image.

So what is base64?

Base64 is a method of encoding binary data based on 64 printable characters that can be used to pass longer identity information in an HTTP environment. Base64 are often used to represent, transmit, and store binary data, and images are binary data. (printable characters in Base64 include the letter A-Z, A-Z, the number 0-9, a total of 62 characters, and two printable symbols in different systems)

The advantage of Base64 encoded images is that when you want to use a small picture (such as a background image for tiling), you can reduce the HTTP request by changing the image to Base64 form.

We can use HTML5 's new features to get the base64 encoding of images without the help of other tools:

1, a method is based on the HTML5 FileReader Object Readasdataurl () method, below is a read input upload image and then show the example, This.result is the image of the base64 encoded information.

document.getElementById ("file"). onchange=function() {    varnew  FileReader ();   Reader.readasdataurl (this. Files[0]);    function (e) {         = ' . result+ ' "> '}    }

2. One way to do this is to use the Todataurl () method of picture processing in HTM5 's canvas, one of my previous articles is about how to use canvas to process image data:

Canvas Learning Note: Canvas's application of pixel-level processing--imagedata to images,

You can simply modify the code in the next article, as long as the picture on the canvas, do not modify the picture data, and then return the image by Todataurl () Base64 encoding.

Four, finally talked about multi-picture background:

A specification for multi-picture backgrounds was made in the CSS3 stable draft: The Background-image attribute can be set multiple background images by "," to separate multiple image URLs.

Each image background creates a background layer (background layer), with several background images defining several layers. Background-image the first image in the picture list is closest to the user, and the last image is farthest from the user, Background-color below the background image farthest from the user, Border-color and border-image on the first background image, Similar to the concept of layers in PS.

If an image (such as an invalid URI) cannot be loaded successfully, the browser will determine the value of the corresponding background-image as none (the corresponding layer is still present), indicating that the picture is missing, but does not affect the rendering and rendering of other background images. Since the network instability causes the background image to be loaded, background-color should always be provided.

Of course, the most concern is the browser support situation, it is reassuring to chrome,firefox,ie9+, the mobile terminal browser supports multi-background images.

Well, there's a lot of crap, and the example is more intuitive:

Next I'll use 4 images (halfrombes.png, Microbiamat.png, Stairs.png, Stars.png), which are added sequentially to the Background-image:

The code is as follows:

. Parent {           height:200px;       width:500px;       Border: 10px solid RGB (123);       background-color: #bff;         background-image:url (halfrombes.png), url (microbiamat.png), url (stairs.png), url (stars.png) ;      background-position: Left top, right bottom, right top;       background-repeat: no-repeat, Repeat-x;}

Yes, the values of the attributes such as Background-position,background-origin,background-repeat are also set accordingly, and are separated by a "," , one-to-one declaration multiple images. If an attribute has too many values set, discard the extra values that follow, and if a property does not provide enough value, the list of values for the property is applied repeatedly. The effect is as follows:

Let's analyze This article by clause:

Because the picture in front of the background picture will be in the upper layer, and the back of the picture in the lower layer, so see the triangle figure on the top, the star in the bottom of the figure.

Position only gives 3 values, so the following figure repeats the value of the position list, so it's actually: lefttop, right bottom, top, left top;

Repeat gives only 2 values, so the list of attributes is repeated, in fact:no-repeat, repeat, no-repeat, repeat;

The same applies to other Background property values.

Interestingly, Background:inherit; (ie7-not supported) allows elements to inherit the background properties of the parent element, even the multi-image background is no exception oh (modern browsers support multi-image background inheritance, mobile is more properly supported), here is a nested div example, In the example above. The parent container nests a. Child container and applies the following style to the sub-container:

    .Child {      margin-top: 220px;/* In order for the sub-container to appear under the parent container, compare */      height:  200px;       background:inherit;  /* Inherit the parent element's background */    }

The result is this:

Of course , base64 encoded images can also be used for multi-image backgrounds, gradients can be, and even can be mixed together!

PC-side and mobile-browser can also provide very good support.

Mixing the above examples together is this:

. Parent{Height:200px;width:500px;Border:10px solid RGB (123,.);Background-color:#bff;Background-image:URL (halfrombes.png), url (data:image/png;base64, ivborw0kggoaaaansuheugaaaa4aaaaecayaaaacni9kaaaaaeleqvq4jcxtmq4aebaeqh/yj69vq31ctswrc26ddcvvu1ntzvkqq+ vcyuudpmupfwjece9yoibhhg+ usoxwocszna87xmv2ah4rbbm3enmvb5fdexc3qct3uems30eujdgotxh0vrtri9j3utwnewiaaaaasuvork5cyii=), url (Stairs.png), Linear-gradient (to left top, red, blue);background-position:Left top, right bottom, right top;background-repeat:No-repeat, Repeat-x;}

The effect is as follows:

I admit that the figure is ugly, but just to illustrate the usage. Here 's a site that uses multiple gradients to set the background pattern, and the secret is that the above image is borrowed from this website:css3patterns

Five: Set multi-picture background blending mode:

When more than one background picture is specified in a container, by default, the picture is superimposed on a layer of images in the order of the declared pictures, similar to the concept of a layer in PS. By default, if the upper picture background is transparent, then you can see the lower picture, such as the upper layer of the picture is opaque, then you will not see the lower picture. However, there is an attribute that can be used to define the overlapping display of images in a multi-image background, this property is:

background-blend-mode：[ normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn |   hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity ]

( for a description of each possible value, here is a more detailed formal explanation: Mdn#blend-mode)

By specifying the background blending mode, the color of the overlapping parts of the background picture and background color can be mixed in a certain way.

you can specify a blending mode to apply to all background pictures, or you can specify different blending modes individually, set according to the order in which the pictures are background-image declared.

IE browser and UC browser is not supported, Safari section support (Hue,saturation,luminosity,color not supported): Browser to Background-blend-mode support situation.

When I apply to. Parent container: background-blend-mode : luminosity;

The effect is like this (Safari does not support luminosity values):

Haha, you can know that Background-blend-mode cannot be inherited by setting Background:inherit .

It is important to note that Background-blend-mode has not been included in the CSS candidate recommendations , but the browser support situation is already very strong.

Have to sigh, CSS is really more and more powerful.

At the end of the article, I think it is necessary to solve a doubt: Why the value inside the URL is enclosed in quotation marks, some people do not use quotation marks to wrap it up?

In fact, the code of the URI value: Http://www.w3.org/TR/2011/PR-CSS2-20110412/syndata.html#uri

This is what the original code says:

The format of a URI value is ' url (' followed by optional white space followed by an optional single quote (') or double qu OTE (") character followed by the URI itself, followed by a optional single quote (') or double quote (") Character Follo Wed by optional white space followed by ') '. The quote characters must be the same.

Some characters appearing in a unquoted URI, such as parentheses, white space characters, single quotes (') and double qu OTEs ("), must be escaped with a backslash so and the resulting URI value is a URI token: ' \ (', ' \ ') '.

the URL () can wrap an optional single or double quotation mark with an optional space, and then wrap the URI itself. when the URL () does not enclose the URI in quotation marks, if the URI contains parentheses, spaces, single quotes, or double quotation marks, it must be transcoded through ' \ ', for example, if the URI contains ' () ', then transcode to this:' \ (', ' \) '.

That is, the URL (a.png) is equivalent to the URL (a.png), equivalent to the URL (' a.png '), equivalent to the URL ("A.png"), equivalent to the URL ("A.png").

So without the quotation marks is compliant , and can reduce the size of the CSS file, although the role is minimal. Browsers are conforming to this implementation, (IE9 under the IE7 mode a little geek, whatever he is)

There is a point of view that there is a security problem without quotes, this is mainly due to XSS attacks, but since the CSS file is written by the developer itself, that is, the URL will not be inserted into the non-trusted data, then of course you can safely omit the quotation marks.

This is the end of this article, mainly about the Background-image property, the next time you will be a complete summary of other background properties.

-------------------------------Reprint Annotated source ^_^: http://www.cnblogs.com/suspiderweb/

Background composite Properties Detailed (UP): Background-image