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

This article mainly introduces how css3 uses the background-origin attribute to make the background page effect of letters, which has certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

The background attribute in css3 is even more powerful, allowing multiple background images to be superimposed within the same element.

Let's first introduce the background property:

Background:

Value:

Specifies or retrieves the background image of the object

Specifies the display area of the background See background-origin

Specifies the crop region of the background See background-clip

Sets or retrieves whether and how the background image of the object is laid repeatedly

Specifies the size of the background picture See background-size: set or retrieve the background image location of an object.

Background-clip:

Value: border-box: crop the background outward from the border area. Padding-box: crop the background outward from the padding area. Content-box: crop the background outward from the content area. No-clip: crop the background outward from the border area.

Background-origin:

Value: border: the background is displayed from the border area. Padding: displays the background from the padding area. Content: displays the background from the content area.

Description:

Used to determine the reference location of the background-position calculation.

Background-size:

Value:: the length value consisting of a floating point number and a unit identifier. Cannot be negative. The value is between 0% and 100%. Cannot be negative.

Description:

Sets the size of the background picture.

Specifies the background size, displayed in pixels or percentages. When specified as a percentage, the size is determined by the width and height of the area, and the location of the background-origin. Images can also be scaled through cover and contain.

The complete reference code is as follows:

Background-origin

Div {

Height:600px

Width:416px

Border:solid 1px red

Padding:120px 4em 0

Background:url (images/p3.jpg) no-repeat

-moz-background-origin:border

-webkit-background-origin:border

Background-origin:border

-moz-background-size:cover

-webkit-background-size:cover

Background-size:cover

Overflow:hidden

}

Div h2 {

Font-size:18px

Font-family: "Young circle"

Text-align:center

}

Div p {

Text-indent:2em

Line-height:2em

Font-family: "italics"

Margin-bottom:2em

}

Spring

Looking forward to, the east wind is coming, the pace of spring is approaching. Everything seemed to have just woken up and opened his eyes gladly. The mountains are moist, the water is growing, and the sun is blushing. The grass came out of the earth secretly, tender and green. In the garden, in the fields, look, there are a lot of them. Sit, lie down, roll twice, kick a few balls, run a few races, catch a few hide-and-seek. The wind is light and quiet, and the grass is soft.

Peach trees, apricot trees, pear trees, you do not let me, I do not let you, are full of flowers to drive the children. Red is like fire, pink is like Xia, and white is like snow. Flowers with sweet taste, closed eyes, the tree seems to be full of peaches, apricots, pears! Hundreds of bees are buzzing under the flowers, and butterflies of all sizes fly around. Wild flowers are everywhere: miscellaneous, have a name, no name, scattered in the grass, like eyes, like stars, but also blink again and again.

Thank you for reading this article carefully. I hope the article "css3 how to use background-origin attributes to make background pages of letters" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.