What are the new background attributes in css3?-Front-end Q&A-php.cn

What are the new background attributes in css3?

青灯夜游

Release： 2022-02-25 18:32:09

Original

3551 people have browsed it

There are three new background attributes added to css3: 1. background-clip, which specifies the area where the background image of the object is clipped outward; 2. background-origin, which specifies where the background image starts to be displayed; 3. background -size, specifies the background image size.

What are the new background attributes in css3?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

New background attribute in css3

##AttributeDescriptionCSSbackground-clipSpecifies the area where the object's background image is clipped outward. 3background-originSet or retrieve the reference origin (position) of the object's background image when calculating background-position. 3background-sizeRetrieves or sets the size of the object's background image. 3

1. background-size: Specify the size of the background image

Before CSS3, the background image The size is determined by the actual size of the image. In CSS3, the size of the background image can be specified, which allows us to reuse the background image in different environments. You can specify dimensions in pixels or percentages. If the dimensions are specified as a percentage, the dimensions are relative to the width and height of the parent element.

div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Copy after login

2. background-origin: Specify where to start displaying the background image.

The background image can be placed in the content-box, padding-box or border-box area.

div{
background-image:url(&#39;smiley.gif&#39;);
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

Copy after login

3. background-clip: Specify where to start cropping the background image

div{
background-color:yellow;
background-clip:content-box;
}

Copy after login

(Learning video sharing:

css video tutorial,Web front-end introductory tutorial)

The above is the detailed content of What are the new background attributes in css3?. For more information, please follow other related articles on the PHP Chinese website!