The difference between background-origin and background-clip_html/css_WEB-ITnose

Background-origin and background-clip are newly added attributes in CSS3. In fact, one is to place the background image, and the other is to clip the background image.

The choices for background-origin and background-clip are the same: content-box, padding-box, border-box (note that in Firefox, Chrome and Safari, you need to use private attributes, plus -mox- and -webkit-)

Before the difference, let me explain:

This is a common box model. The edges around content, padding, border, and margin are in the picture. Being identified, they play a very important role in distinguishing the three choices (content-box, padding-box, border-box).

origin means the original meaning when translated. As the name suggests, background-origin is used to determine the original starting position of the image, that is, you can choose whether the background image is displayed starting from the content area, padding, or border.

                                                                                           :content

                                                                          >We see that when the value of background-origin is content-box, the upper left corner of the background image will first be aligned with the upper left corner of the content edge; when padding-box is used, the upper left corner of the background image will be aligned with the inner margin. Align to the upper left corner. And so on. It can be seen that the value of background-origin indeed determines the area from which the background image starts to be displayed.

In addition, where is the default starting position of background-origin? I won’t demonstrate it here, but remember it’s padding.

Next, background-clip is introduced. Its function is to appropriately crop the background image to suit the needs. Of course, the image is not cropped in the true sense here, but based on the attribute value. Hide certain parts of the picture appropriately. What kind of tailoring method? Depending on the box location you set, the image will be invisible outside the outer edge of this location.

                                                                                                                                                                                                               ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐

It can be seen that although the picture is positioned from the upper left corner of the border, the cropping attribute background-clip is set to content-box, so only the content of the content area is visible, that is As long as the image content outside the content is hidden.

If this article helps you, please move your finger and recommend this article~Thank you~^^