Summary of some background settings in CSS,

Summary of some background settings in CSS,

When writing a webpage, You need to perform operations on images in many cases. How can you maximize the satisfaction of your materials without professional artist cropping, for those who are too lazy to open a ps cut, I usually download an image on the network and drag it directly to html. This requires some adjustments to the css style of the image, since I can't remember some style attributes and can't put pictures in my opinion, I have to ask Baidu every time. Several times, I am very annoyed, as a result, I specially sorted out some attributes of the image in css and put them here for you to view them in time next time (a lot of nonsense ):

Background attributes in css2 include:

• Background-color: Specifies the color of the background to be filled. this parameter is only used when a solid background is not introduced. In this case, it can be used directly.

 

　　　　　　background：#eee;

• Background-image: Reference an image as the background, as shown in figure

  　　backgroud-image：url("img/bg.jpg");

• Background-position: Specifies the position of the element background image, which is not used by many people, but it is quite useful. In reality, the upper left corner of the image corresponds to the upper left corner of the element, when you plan to use pixels for location, you can use:

  Background-position: 0 0; // the first digit indicates the horizontal position of the X axis, and the second digit indicates the vertical position of the Y axis. background-position: 0 100px;

You can also use other numeric values when the element size is not applicable to pixel settings, such

Background-position: top right; // right background-position: 100% 50%; // use the percentage value of the element to set the image position, as shown in the preceding figure.

• Background-repeat: determines whether to repeat the background image. The values are as follows:

  Background-repeat: repeat; // the image can be repeated. background-repeat: no-repeat; // The image cannot be repeated. background-repeat: repeat-x; // The image can repeat background-repeat: repeat-y on the X axis; // the image can repeat background-repeat: inherit on the y axis; // follow the settings of the parent Element

• Background-attachment: determines whether the background image is scrolled along with the page. Optional values:

  Background-attachment: scroll; // default value; indicates that the background is close to the element background-attachment: fixed; // The background does not scroll with the element. When the page is down, background: inherit at the initial location relative to the browser; // follow the settings of the parent Element

When you want to set multiple attributes of the background, you can set each attribute separately or merge it into one row and write it in one attribute:

　　background: transparent url(image.jpg) 50% 0 scroll repeat-y;

Many Attributes are added to background in css3:

• Background-color: set the size and size of the image. The values are as follows:

  Background-size: contain; // zoom out the image to adapt to the element size (the image aspect ratio remains unchanged) background-size: cover; // expand the image to fill the element (the image aspect ratio remains unchanged) background-size: 50% 100%; // customize the image size

   

• Background-clip: trim the background to control the display position of the background. values include:

  Background-clip: border-box; // The background is displayed in the border. background-clip: padding-box; // The background is displayed in the padding (not in the border) background-clip: content-box; // display the background only in the content (not in padding or border)
  

There are two other attributes: background-break and background-origin. I have never used these two attributes. I have read the online explanation and I think there is no big use. I will not write them down here.

The knowledge about the background in css is still very broad and profound. I will give it a new understanding in the future.

Note: article reference "http://blog.csdn.net/adenfeng/article/details/8199362