About CSS3 Multi-background and background image clipping and positioning and size details

We can add a picture to the background before CSS3

CSS3 allows us to add multiple images on one element

Multiple background images

<p class= "Demo" ></p>

. demo {    width:600px;    height:200px;    border:1px solid black;    Background:url (' 1.png ') no-repeat;}

Multiple backgrounds can add more than one picture resource to the background attribute, separated by commas
and use background-position to position them where you want them.

. demo {    width:600px;    height:200px;    border:1px solid black;    Background:url (' 1.png ') no-repeat,                url (' 2.png ') no-repeat 200px 0,                url (' 3.png ') no-repeat 400px 0;}

If you do not set no-repeat, the image resource below will overwrite the image resource above

Picture start position Background-origin

Background-origin allows us to define where the image begins to locate
Optional attribute values Padding-box (default), Border-box, Content-box;
Padding-box default picture starts from the inside margin
We can add the inner margin to prove it.

. demo {    width:600px;    height:200px;    border:20px Solid gray/* Change * *;    padding:20px/* increase */;    Background:url (' 1.png ') no-repeat,                url (' 2.png ') no-repeat 200px 0,                url (' 3.png ') no-repeat 400px 0;}

"Note: CSS is not able to line comments, I like this comment is to highlight the effect, we do not be misled."

Border-box defining a picture starting from a border

. demo {    width:600px;    height:200px;    border:20px solid gray;    padding:20px;    Background:url (' 1.png ') no-repeat,                url (' 2.png ') no-repeat 200px 0,                url (' 3.png ') no-repeat 400px 0;    background-origin:border-box/* * *;}

Modified to Border-box we found that part of the picture was blocked at the bottom of the gray background color.
Can be understood as a border actually to be on the top of the element

. demo {    width:600px;    height:200px;    border:20px solid gray;    padding:20px;    Background:url (' 1.png ') no-repeat,                url (' 2.png ') no-repeat 200px 0,                url (' 3.png ') no-repeat 400px 0;    background-origin:content-box/* change */;}

Content-box defines the starting position from the content part of the element

Picture clipping Background-clip

Although our starting position is set to the content area
But that doesn't mean our images are confined to the content area.
Can be drawn within the entire element's borders and borders
Can slightly modify the above code to prove this point

. demo {    width:600px;    height:200px;    border:20px Solid transparent/* Change * *;    padding:20px;    Background:url (' 1.png ') no-repeat,                url (' 2.png ') no-repeat 200px 0,                url (' 3.png ')/* Delete no-repeat default repeat*/ 400px 0;    Background-origin:content-box;}

So is there a way to set the scope of the picture display?
This is where our background-clip properties are used.
Similar to the Content-origin property value
There are Padding-box (default), Border-box, Content-box;
Set the picture display range as if it were cropped

. demo {    width:600px;    height:200px;    border:20px solid transparent;    padding:20px;    Background:url (' 1.png ') no-repeat,                url (' 2.png ') no-repeat 200px 0,                url (' 3.png ') 400px 0;    Background-origin:content-box;    background-clip:content-box/* * *;}

So the extra part of the picture can't be seen.

The picture clipping property in our WebKit also has a special property value of text
It means that the background image is limited to text.
With Text-fill-color, you can create a unique matte text effect and learn about

<p class= "Demo" > A scientific super-electromagnetic cannon </p>  <--Add content

. demo {    width:600px;    height:200px;    border:20px solid transparent;    padding:20px;    Background:url (' 1.png ') no-repeat,                url (' 2.png ') no-repeat 200px 0,                url (' 3.png ') 400px 0;    Background-origin:content-box;    -webkit-background-clip:text;/* */    -webkit-text-fill-color:transparent;/* Increase    */font:75px/200px bold;/* Increase * /}

Picture size Background-size

Back to one of our pictures.
Background-size This property allows us to control the size of the image
Like writing two pixel values to control the width of the high

. demo {/* NEW */    width:600px;    height:200px;    border:1px solid black;    Background:url (' 1.png ') no-repeat;    background-size:180px 140px;}

Write a pixel value that represents the same width and height as the pixel
Of course it can be written in the form of hundred

In addition, there are two keywords: cover and contain
Cover covers the entire area, and in our case the width will be full.

. demo {    width:600px;    height:200px;    border:1px solid black;    Background:url (' 1.png ') no-repeat;    background-size:cover/* change */;}

Contain is to ensure the maximum display of the image in the area, in our case the height will be full

. demo {    width:600px;    height:200px;    border:1px solid black;    Background:url (' 1.png ') no-repeat;    Background-size:contain;}

CSS3 the background picture, that's what this is about.