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

Editor to share with you the example analysis of Background-Origin and Background-Clip in CSS3, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The code is as follows:

.box {background:url ("image/flowers.jpg") no-repeat

Width:500px

Height:500px

Border:solid50pxrgba (0. 0. 5)

Padding:50px

Float:left

Margin-right:15px

Box-sizing:border-box

}

.boxspan {color:#000;display:block;font-size:30px;font-weight:bold;height:100%;text-transform:uppercase;background-color:rgba (256, 256, 256, 256, 0.5)

Background-Origin allows you to determine the starting point of the background location you want, border (boundary), padding (fill), and content (content).

The new property background-origin has three values based on box-model:

1. Border-box- locates the background position 0p0 and points to the upper left corner of the border.

2. Padding-box (default)-position the background at 0 point 0 in the upper left corner of the fill.

3. Content-box- locates the background position 0p0 and points to the upper left corner of the content.

The above is all the content of the article "sample Analysis of Background-Origin and Background-Clip in CSS3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.