Css background family, cssbackground

Css background family, cssbackground

Background is an important part of css and one of the basics of css. Now let's review five attributes in css2 and three new attributes and two functions in css3.

Css2_background (background) Prepass family member

The background family in css2 consists of five main background attributes:

Background-color specifies the filled background color background-image references the image as the background image background-position specifies the position of the background image of the element background-repeat determines whether the background image is tiled background-attachment or not.

Want to know the detailed identity of the five members of the family, for details, hurry up and sit down, quietly listen to my bragging!

Background-color background color

This member can only fill the background with solid colors.

background-color: colorName ;　 

ColorName value: (1) color name: red, green, blue, skyblue ...... (2) rgb (): rgb (255,255,255), rgb (12,202, 29 )...... (3) hexadecimal color values: #000000, # ffffff, # ff6600 ...... Special Value (default): (4) transparent: transparent; // transparent background

Background-image background image

This member allows you to specify an image as the background.

Background-image: url (imagePath); // imagePath indicates the image path (relative path and absolute path)

Best practices: Used with (background-color) to ensure that the background color can be filled in the following situations:

A> the image is deleted by mistake (the path may be wrong or the image does not exist); B> the image is deleted by mistake; c> the image cannot overwrite the entire box without being tiled;

Background-repeat background Tile

When you set a background image, this member will tile the image horizontally and vertically to fill the entire box by default.

Background-repeat: propertyValue; // propertyValue indicates the property value.

Value of propertyValue: (1) repeat: (default) Tiled (2) no-repaet: Not tiled (3) repeat-x: tiled horizontally (4) repeat-y: vertical Tile

Background-position background Positioning

This member controls the position of the background image in the box, that is, the position in the upper left corner of the background image relative to the upper left corner of the box.

Background-position: X-coordinate Y-coordinate; // (horizontal and vertical coordinates)

Attribute Value: (1) percentage: 10% ...... (2) pixel value: 10px ...... (3) azimuth noun: horizontal direction: left right center vertical direction: top bottom center

The default value is three expressions:

　　　background-position: left top ;　　　background-position: 0px 0px ;　　　background-position: 0% 0% ;

Note:

When the percentage is used for background positioning, the browser sets the image position based on the percentage value of the box size. For example:

Background-position: 40% 50%; 40% refers to the position of the background image in the horizontal direction of 40%, corresponding to the position of the horizontal direction of the box 40% refers to the position of the background image in the vertical direction of 50%, corresponding to the vertical 50% position of the box

Background-attachment background attachment

This member determines whether the background image is fixed or scrolled with the rest of the page.

Background-attachment: status // background attachment status

Status value: (1) scroll: scroll (default). The background image will scroll with the rest of the page (2) fixed: fixed. When the rest of the page is rolled, background image does not scroll (3) inherit: inherits the settings of the background-attachment attribute from the parent element (rarely used)

Css3_background (background)

CSS3 not only adds three members to the background family, but also expands two important functions for the background family.

Knowledge Point Station:

CSS3 was not led by W3C, but by WHATWG, composed of various browser vendors. It was later adopted by W3C. Therefore, the new attributes of CSS3 are written differently before and after W3C adoption.

Before being adopted by W3C, if the browser wants to support this attribute, it needs to add the private prefix of the browser (the Kernel used by the browser) to indicate that this is the private attribute of the browser, it is not an official W3C attribute. Therefore, in actual work, you have to write this (taking the background-origin as an example ):

-Webkit-background-origin:;-moz-background-origin:;-ms-background-origin:;-o-background-origin :; // Add the private prefix of the browser in the format of background-origin:; // W3C, which must contain

(1) New Family Members

Let's take a look at the new members of the background family. They are very handsome and mysterious:

Background-origin background-size background-clip background Cropping

Next, the old driver will be driving for a long time. Please take a good seat and grasp the handrails !!

Background-origin

This member determines the location of the background image and the location of the box.Background-position.

By default, the background image is located relative to the inside margin (padding) of the box! However, in css3, the type background image can be located relative to the box's border (border) and content (content.

-Webkit-background-origin: positionArea; // positionArea indicates the positioning area-moz-background-origin: positionArea;-ms-background-origin: positionArea;-o-background-origin: positionArea; background-origin: positionArea;

PositionArea value: (1) padding-box: positioning of the background image relative to the inside margin of the box (default) (2) border-box: positioning of the background image relative to the border of the box (3) content-box: locates the background image relative to the content of the box.

Note:

A> This member is supported from IE9;
B> composition of the Box Model in css: content (content) + padding (internal margin) + border (border) + margin (outer margin );

Background-size background size

This member determines the size of the background image, but does not change the original size of the image.

-Webkit-background-size: widthSize heightSize; // (width and height)-moz-background-size: widthSize heightSize;-ms-background-size: widthSize heightSize; -o-background-size: widthSize heightSize;

Attribute Value:

　　(1) Default Value: auto

Background-size: auto; // The background image is displayed in its own size.

(2) pixel value: px ......

Background-size: 50px 50px; // The background image is displayed with the specified value.

(3) percentage: 100% ......

Background-size: 50% 50%; // The background image is displayed as a percentage relative to the box size.

(4) cover

Background-size: cover; // scale the background image until it overwrites the box.

(5) contain

Background-size: contain; // scale the background image to the width or height equal to the box when the complete background image is displayed.

Best practices:
Private image features: as long as you set any image width or height value, the image will be scaled proportionally, so that the image will not be distorted;
Therefore, when you do not know the proportional scaling of an image, the background-size can only be set to any value of the image's width and height, set it to auto.

Background-clip background Cropping

Rules for this MemberBackground(Background image or background color.

-Webkit-background-clip: clipArea; // clipArea indicates the painting area-moz-background-clip: clipArea;-ms-background-clip: clipArea;-o-background-clip: clipArea; background-clip: clipArea;

Value of clipArea: (1) border-box: crop the background from the box border (default) (2) padding-box: crop the background from the inside margin of the box (3) content-box: the background is cropped from the content of the box.

(2) family extension Functions

What two functions have css3 added to the background family!

A> multiple background images B> background gradient

What is the mysterious function like this? Let's analyze it together!

Multiple background images

In css3, one or more images can be applied to an element box as the background, and multiple backgrounds are separated by commas (,), and the images are displayed in the writing order!

background:url(./images/01.png),url(./images/02.png),url(./images/03.png);

Note:

A> supported since IE9;
B> you do not need to add a private browser prefix;
C> If content-box, padding-box, and border-box are set together, you need to write content-box at the beginning, padding-box at the second place, and border-box at the end;

background:url(./images/01.png) content-box , url(./images/02.png) padding-box , url(./images/03.png) border-box;

　　Note: content-box, padding-box, and border-box are both attribute values of background-clip and background-origin;

Background gradient

In css3, you can set a background color gradient for an element box, instead of simply setting a solid color as the background color of the box or specifying an image as the background of the box! Remember that the background gradient here is the background color! Background color! Not a background image !!

(1) linear gradient

Also known as linear gradient.

Background-image:-webkit-linear-gradient (startLocal, color1, color2, color3); background-image:-moz-linear-gradient (startLocal, color1, color2, color3 ); background-image:-ms-linear-gradient (startLocal, color1, color2, color3); background-image:-o-linear-gradient (startLocal, color1, color2, color3 ); // Add the private prefix of the browser in the format of background-image: linear-gradient (startLocal, color1, color2, color3); // W3C

Color1 indicates the color value:

(1) If no percentage or pixel value is added to the end, a> color1 will be displayed at the starting position; B> color3 will be displayed at the last position; c> color2 will be displayed at the center and other points; (2) If a percentage or pixel value is added, the color will be displayed at this position of the box;

StartLocal indicates the starting position. Optional values:

(1) azimuth nouns:

Top: gradient from top to bottom (default) (equivalent to bottom) left: gradient from left to right (equivalent to right) right: gradient from right to left (equivalent to left) bottom: gradient from bottom to top (equivalent to top) top left: gradient from top left

(2) degree:
In the background gradient, the W3C and WHATWG standards are different: the numbers axis is different, the starting position is different, and the rotation direction is different. Therefore, the degrees are different! Details:

A> In W3C, 0deg is rotated clockwise on the left of the X axis (horizontal direction;
B> In WHATWG, 0deg is at the bottom of the Y axis (vertical direction) and is rotated counterclockwise;

　　　　　　

Background-image:-webkit-linear-gradient (270deg, red, blue); background-image:-moz-linear-gradient (270deg, red, blue); background-image: -ms-linear-gradient (270deg, red, blue); background-image:-o-linear-gradient (270deg, red, blue); background-image: linear-gradient (180deg, red, blue);/* deg indicates degree level */

In particular, W3C does not support the writing of square nouns, but the writing of the number of supported Nouns

(2) radial gradient

Also known as center gradient

Background-image:-webkit-radial-gradient (start_X start_Y, color1, color2, color3); background-image:-moz-radial-gradient (start_X start_Y, color1, color2, color3); background-image:-ms-radial-gradient (start_X start_Y, color1, color2, color3); background-image:-o-radial-gradient (start_X start_Y, color1, color2, color3); // Add the private prefix of the browser in the format of background-image: radial-gradient (start_X start_Y, color1, color2, color3); // W3C

Note: the value of the starting position of the radial gradient is not supported!

Background Sequelae (I) background Complex

In css, you can use the background compound attribute to set all background attributes in a declaration (including the newly added attributes in css3), instead of writing a background attribute separately. You can set the background attributes:

background-color background-position background-repeat background-attachment background-imagebackground-origin background-size background-clip 

Isn't that awesome? But here are a few pitfalls worth our attention!

(1) The common background compound attribute does not include three new background attributes in CSS3 for five background attributes in CSS2!

background: background-image background-repeat background-position background-attachment background-color ；

A> there is no strictly written order (the old driver's written order above );
B> If a property is not written, the default value is automatically used;

Why does background composite attribute not contain three attributes in CSS3? The reasons are as follows:

A> the background attribute in css2 has been supported by various browsers and does not have compatibility. You do not need to write a private browser prefix! B> added the background attribute in css3, which is compatible with each other and requires the private prefix of Each browser to be supported!

(2) Do you still remember that CSS3 adds multiple background images to the background family? This function also starts with background!

So there is a problem!

In an element, we must use the background compound attribute to describe the background attribute of CSS2 and add multiple background images. What should we do?

A> prioritize the use of the background compound attribute to add multiple background images. B> the background attribute can only be written separately and cannot be abbreviated as the background compound attribute! C> the background attribute must be written after the background compound attribute!

Some may ask why the single background attribute must be written after the background compound attribute?

Three major css features: Cascade! Familiar with it? The waves in the Yangtze River are pushed forward, and the waves die on the beach!

(2) background-image attributes

This family member is awesome and of course complicated!

(1) It can overwrite the combination of multiple background images!

In the same element:

This will invalidate the effects of multiple background images.

div{　　width:300px;　　height:300px;　　background:url(images/30/ab.png) content-box,url(images/30/xiaoming.jpg) padding-box; 　　background-image:url(images/30/ab.png);}

In the nested parent-child element:

A> If the size of the background image of a child element is smaller than that of the parent element, more than one background image of the parent element is displayed!
B> If the background image size of a child element is greater than or equal to the size of the parent element, multiple background images of the parent element will be overwritten!

div{　　width:300px;　　height:300px;　　background:url(images/30/ab.png) content-box,url(images/30/xiaoming.jpg) padding-box;}div span{　　display: block;　　width:300px;　　height:300px;　　background-image: url(images/02.jpg);}

(2) The background gradient shares the background-image attribute with the background image!

A> In the same element, the two cannot coexist. Who is at the front and who died first;
B> In a nested parent-child element, the style of the child element only overwrites the style of the parent element;

(3) differences between inserting images and background images

(1) Insert an image placeholder; the background image does not placeholder

(2) The inserted images have high semantics and can be indexed by search engines. The background images have low semantics and cannot be searched by search engines.

(3) Inserting images is not easy to locate; background images are easy to locate because of the background-position attribute.

(4) You cannot use a sprite to insert images. You can use a sprite to insert background images.

(5) There is a bug in inserting an image, with a gap below it.

(4) Best practices

(1) In the same element, the background compound attribute is written in front, and the background attribute that needs to be set separately is written to the end;
Reason: The waves before and after the Yangtze River are pushed to the beach.

(2) multiple background images are added to the same element. Other background attributes can only be written separately and cannot be abbreviated as composite attributes;

(3) In nested parent-child elements, it is not recommended to write attributes with the same name.
Reason: when the child element size is greater than or equal to the parent element size, the style of the parent element overwrites the quilt element;

(4) In actual work, use background images instead of inserting images;

 

This article is a summary and shared by myself after learning. I hope it will help you with your learning!If you have any errors, please kindly advise me. I will correct them as soon as possible! Thank you !!