Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the new background attributes in CSS3". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Prior to CSS3, background image size was determined by the actual size of the image. New background attributes in CSS3: background-image, background-size, background-origin, background-clip.

CSS3 background image: background-image

In CSS3, background images can be added via the background-image attribute.

Different background images and images are separated by commas, and the first image is displayed at the top of all images. Background-position and background-repeat can be used to control the start and repeat of background images.

CSS3 background image size: background-size

In CSS3 you can specify background images. Let's re-specify the size of background images in different environments. You can specify pixel or percentage sizes. The specified size is a percentage of the width and height of the parent element.

Syntax: background-size:length| percentage| cover| contain;

value describes

length Sets the height and width of the background image. The first value sets the width and the second value sets the height. If only one value is given, the second is set to auto(automatic)

percentage calculates the percentage of the area positioned relative to the background. The first value sets the width and the second value sets the height. If only one value is given, the second is set to "auto"

Cover maintains the aspect ratio of the image and scales the image to the minimum size that will completely cover the background anchor area.

contain maintains the aspect ratio of the image and scales the image to the maximum size that will fit the background positioning area.

Location area of background image: background-Origin

The background-Origin property specifies that the background-position property is relative.

The content-box,padding-box, and border-box areas can be used to place background images.

Syntax: background-origin:padding-box| border-box| content-box。

"What are the new background attributes in CSS3" is introduced here. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.