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-origin is used to determine the reference position for background-position calculation.
The syntax is:
background-clip: [border | padding] [, [border | padding]]* |
For background-clip:
If it is a padding value, the background ignores 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 behavior 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 to: 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.
The private attributes of basic non-IE browsers usually start with -xxx-, -o- is private for Opera with Presto as the engine, -icab- is private for iCab, and -khtml- is the browser with KHTML as the engine. (such as Konqueror Safari), -moz- is a browser based on Mozilla's Gecko engine (such as Firefox, Mozilla), -webkit- is a browser (such as Safari, Swift) based on the Webkit rendering engine (a derivative of KHTML) .
That is, the supported private attributes are:
| -moz-background-clip -webkit-background-clip -khtml-background-clip -moz-background-origin -webkit-background-origin -khtml-background-origin |
Here is a simple example of using the background-origin attribute. The effect is as follows:
HTML code:
| <button>Web standardization www.div-css.com</button> |
CSS code:
button { border:3px double #95071b;/*Use 3px double border to simulate the white line in the design*/ background-color:#95071b; /*Set background cropping method and guide lines*/ -moz-background-origin:padding; /*Forward compatible*/ color:#fff; /*Fix height problem under IE6*/ |
Disadvantages: This effect cannot be achieved under Opera. Of course, this is just a solution for those who are obsessed with HTML code (limited to the learning and understanding of background-clip and background-origin attributes). Of course, you can also try other methods, which may make CSS more concise. As for the advantages of various methods The shortcomings are up to you to weigh.