Difference between background-origin and background-clip in CSS3

Source: Internet
Author: User

  • Background-origin: to determine howbackground-positionOf a background in a certain box is calculated.
  • Background-clip: to determine whether the backgrounds extends into the border or not.

In other words, it is actually:

  • Background-origin: used to determine where the background starts
  • Background-clip: used to determine where the background is displayed (in fact, clip can be seen from the literal meaning of origin and clip. clip is cut). Where can the background be extended.

They have three values: border-box | padding-box | content-box. The default value of background-origin is padding-box, the default value of background-clip is border-box.

The following examples show their differences more bluntly:



Then add a simple style:


The result is as follows:

The default values of background-origin and background-clip are padding-box and border-box.

When you add the following code groups, you can see different effects:

A branch -------------------------------------------------------------------------------------------


We can see that the background image is drawn from border and the display starts from border, so the effect is as above.

B Branch --------------------------------------------------------------------------------------------


The painting starts from border, but the display starts from padding, so it is shown as above.

C Branch --------------------------------------------------------------------------------------------


Draw starts from content, and display starts from border.

D Branch --------------------------------------------------------------------------------------------

Of course, if the rendering starts from border and the display starts from content, the effect will be the following.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.