CSS3 tutorial: background-clip and background-origin

Original text: http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip and background-origin are new background module properties added in CSS3, used to determine the positioning of the background. background-clip is used to determine whether the background contains the border area. And background-or
Original text: http://www.planabc.net/2008/04/14/background-clip_background-origin/
background-clip and background-origin are newly added background module attributes in CSS3 , used to determine the positioning of the background.
background-clip is used to determine whether the background contains the border area. And background-origin is used to determine the reference position for background-position calculation.
The syntax is: background-clip: [border | padding] [, [border | padding]]* background-origin: [border | padding | content] [, [border | padding | content]]*

For background-clip:
If it is a padding value, the background ignores the padding edges and the border is transparent. If it is a border value, the background includes the border area. If there are multiple background-image images, the corresponding background-clip values ​​are separated by commas.
For background-origin:
If it is a padding value, the position is relative to the padding edge ("0 0" is the upper left corner of the padding edge, and "100% 100%" is the lower right corner ). If it is a border value, it means the relative border edge. The border value is relative to the content edge. Like background-clip, multiple values ​​are separated by commas. If background-clip is the padding value, background-origin is the border value, and background-position is "top left" (default initial value), the upper left corner of the background image will be cut off.
These two attributes only appear from CSS3. What about the default performance in the background module when this attribute is not used?
Background-clip defaults to something like background-clip:border.
background-origin defaults to something like background-origin:padding.
But IE is a special case (It sucks).
In IE6 and IE7, the background of general elements (except buttons, etc.) is equivalent to: background-clip:border; background-origin:border;
The background of hasLayout elements (plus buttons, etc.) is equivalent In: background-clip:padding; background-origin:padding;
This pair of CSS3 properties has been implemented in browsers such as Mozilla, Safari 3 and Konqueror, but they are all expressed through their private properties.
Quote:
The private attributes of basic non-IE browsers usually start with -xxx-, -o- is the private attribute of Opera with Presto as the engine, -icab - is private to iCab, -khtml- is a browser with KHTML as the engine (such as Konqueror Safari), -moz- is a browser with Mozilla's Gecko as the engine (such as Firefox, Mozilla), -webkit- is rendered with Webkit Engine (which is a derivative of KHTML) browsers (such as Safari, Swift).
The supported private attributes are: moz-background-clip webkit-background-clip khtml-background-clip moz-background-origin webkit-background-origin khtml-background-origin

The above is the detailed content of CSS3 tutorial: background-clip and background-origin. For more information, please follow other related articles on the PHP Chinese website!