Css3-background Clip and background origin

1.background-origin

There are 3 parameters in Background-origin: Border-box | Padding-box | Content-box;

Border-box,padding-box,content-box from the border, or the padding (the default), or the content area to start displaying.

Code Demo:

<! DOCTYPE html>"Utf-8"> <title> background </title> <style type="Text/css">. Wrap {width:220px;            border:10px dashed salmon;            padding:20px; Font-Weight:bold; color:# the; Background: #ccc URL (4. png) no-repeat; Background-origin:border-box;        position:relative;            }. content {height:80px; border:1px Solid #333; }    </style>class="Wrap"> <divclass="content">content</div></div></body>
The inserted picture is placed locally:
Effect
(1) Padding-box
(2) Content-box
(3) Border-box
2.background Cllip
Used to tailor the background image to fit the actual needs.
Grammar:
Background-clip:border-box | Padding-box | Content-box | No-clip

Code Demo:
 <! DOCTYPE html> " utf-8  "  > <title> background Origin </title> <style type=< Span style= "COLOR: #800000" > " text/css  "             > wrap {width:220px;            border:10px dashed salmon;            padding:20px;            Font -weight:bold;            color:#  000  ;            Background: #ccc URL ( 4 . png) No-repeat; Background -clip:border-box;/* Change the value of background,  Border-box | Padding-box | Content-box | No-clip */
position:relative;} . content {height:80px; border:1px solid #333class="wrap"  Class="content">content</div> </div> </body> < /html>
Effect
(1) Border-box

The picture does not start from the left border

(2) Padding-box

(3) Content-box

(4) The difference between backround clip and background origin
The real role of Background-clip is to determine which areas the background is displayed in.
Background-origin refers to the area where the background is displayed, or where the background is drawn from (border, filter, or content area)
Background origin
(1) Padding-box
(2) Content-box
(3) Border-box
Background clip
(1) Border-box

The picture does not start from the left border
(2) Padding-box

(3) Content-box
As can be seen from the 6 above, the picture of background origin is from the border, the padding, the content begins, The background color does not change, The picture of background clip is displayed in the border, padding, content, background color change, background color from border, inner margin, content started, no place blank
PS: Watch for changes in background color


Css3-background Clip and background origin