【CSS3】-background-origin background-clip background-size_html/css

【CSS3】-background-origin background-clip background-size_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:46

Original

1552 people have browsed it

background-origin

Sets the original starting position of the element's background image.

Syntax:

background-origin ： border-box | padding-box | content-box;

Copy after login

The

parameters respectively indicate whether the background image is from the border , or padding (default value) , or The content area starts to display.

The effect is as follows:

It should be noted that , if the background is not no-repeat, this attribute is invalid, it It will be displayed starting from the border.

Example:

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景原点</title><style type="text/css">.wrap {    width:220px;     border:20px dashed #000;     padding:20px;     font-weight:bold;     color:#000;     background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;     background-origin:content-box;//内容区域显示    position: relative;}.wrap span {     position: absolute;     left:0;     top:0;}.content {    height:80px;     border:1px solid #333;}</style>  </head> <body><div class="wrap"><span>padding</span>    <div class="content">content</div></div></body></html>

Copy after login

Effect:

background-clip

is used to clip the background The pictures are cropped appropriately to suit actual needs.

Syntax:

background-clip ： border-box | padding-box | content-box | no-clip

Copy after login

parameters respectively represent filling from the border, or , or content area outwards Crop the background. no-clip means no clipping, and the parameter border-box shows the same effect. The default value of backgroud-clip is border-box.

The effect is as shown below:

Example:

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景裁切</title><style type="text/css">.wrap {    width:220px;     border:20px dashed #000;     padding:20px;     font-weight:bold;     color:#000;     background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;     background-origin: border-box;    background-clip:padding-box;    position: relative;}.wrap span {     position: absolute;     left:0;     top:0;}.content {    height:80px;     border:1px solid #333;}</style>  </head> <body><div class="wrap"><span>padding</span>    <div class="content">content</div></div></body></html>

Copy after login

Effect: padding-box effect:

background-size

Set the size of the background image, displayed as length value or percentage, or via cover and contain to scale the image.

Syntax:

background-size: auto | <长度值> | <百分比> | cover | contain

Copy after login

Value description:

1. auto: Default value, does not change the original height and width of the background image;

2. : appear in pairs such as 200px 50px. Set the width and height of the background image to the first two values in sequence. When setting a value, use it as The image width value is proportionally scaled ; Set in turn to the value obtained by multiplying the width and height of the element by the previous percentage. When setting a value, the same as above;

4. cover: As the name suggests,

covers

, that is, The background image is scaled to to fill the entire container; 5. contain: Contain, that is, the background image is scaled to

one side close to the container To the edge

. Tips: You can enter your own code in the editing window on the right to try out the effects of different values.

multiple backgrounds

Multiple backgrounds, that is, the attributes of

background

plus

origin

in CSS2 Multiple overlays of new backgrounds composed of , clip and size are abbreviated as each set of values separated by commas ; when written in decomposition, if there is Multiple background images, but only one other attribute (for example, only one background-repeat), indicates that this attribute value applies to all background images. The grammatical abbreviation is as follows:

The above abbreviation can be broken down into the following form:

background-image:url1,url2,...,urlN;

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

Copy after login

Note:

background-repeat : repeat1,repeat2,...,repeatN;backround-position : position1,position2,...,positionN;background-size : size1,size2,...,sizeN;background-attachment : attachment1,attachment2,...,attachmentN;background-clip : clip1,clip2,...,clipN;background-origin : origin1,origin2,...,originN;background-color : color;

Copy after login

Separate the abbreviated values of each group of background with commas;

If there is a size value, it needs to be tight followed by position and separated by "/";

If there are multiple background images and there is only one other attribute (for example, there is only one background-repeat), it means that all background images apply this attribute value.
Background-color can only be set to one.

Use multiple backgrounds Technical implementation:

Example:

Effect:

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>多重背景</title><style type="text/css">.demo{    width: 300px;    height: 140px;    border: 1px solid #999;        background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),                      url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),                      url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);    background-position: left top, 100px 0, 200px 0;    background-repeat: no-repeat, no-repeat, no-repeat;        margin:0 0 20px 0;}.task {    width: 300px;    height: 140px;    border: 1px solid #999;        background:url(http://static.mukewang.com/static/img/logo_index.png) left top/75% 50% no-repeat,                url(http://static.mukewang.com/static/img/logo_index.png) right bottom/50% 45% no-repeat;               }</style>  </head> <body><div class="demo"></div><div class="task"></div></body></html>

Copy after login