Example Analysis of Background-Origin and Background-Clip in CSS3
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!
