How to solve the problem of CSS background display range
Today, the editor will share with you the relevant knowledge points about how to solve the problem of CSS background display scope. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
HTML:
CSS:
Div {
Width:120px
Height:120px
Margin:20px 0 0 10px
Padding:20px
Display:inline-block
Background:url (address)
}
Div > div {
Background:rgba (0pr 200pc255pr. 4)
Margin:0
Padding:0
}
.box {
Border:10px dotted rgba (255pd0re0pl .5)
}
.default {
/ * box-sizing:content-box;*/ / * preset * /
}
. border-box {
Box-sizing:border-box
}
Background-clip
Strictly speaking, background-clip and box-sizing should not be able to hit the edge, but because in the design of a box, often border, padding and margin mixed use, and because of this CSS3 attribute, I suddenly do not know where to write wrong, the result is that I forgot how to use the attribute.
Background-clip has a total of three settings, namely: border-box (preset), padding-box, and content-box. Interestingly, the box-sizing preset just now is content-box, but the preset here becomes border-box. The following three pictures represent the appearance of these three settings. We can see that the first picture is in the case of preset values. Under the border is the original box background color (the frame is a translucent dotted line), the second picture is set to padding-box,border, there will be no box background color, and the last one is set to content-box, only the background of the content area will appear, and the background under border and padding will disappear, which is the meaning of background (background) clip (clipping).
HTML:
CSS:
Div {
Width:120px
Height:120px
Margin:20px 0 0 10px
Display:inline-block
Background:url (address)
Padding:20px
}
Div > div {
Margin:0
Padding:0
Background:rgba (0pr 200pc255pr. 4)
}
.bg-border-box {
/ * background-clip:border-box; * / / * default value * /
}
.bg-padding-box {
Background-clip:padding-box
}
.bg-content-box {
Background-clip:content-box
}
These are all the contents of this article entitled "how to solve the problem of CSS background display scope". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
