A summary of some of the settings in CSS for pictures (background)

Write a page when a lot of situations need to operate the picture, how to do not professional cutting operation of the art of the case and let their own material degree to achieve the maximum satisfaction, this is a problem, for the lazy open PS transduction i, usually directly on the network download a picture, directly dragged into the HTML, This need to make some adjustments to the CSS style of the image, since I always remember some of the style attributes and can not let the picture according to my idea, the last time to Baidu, a few times down, let me very annoyed, so specialized in some CSS in some of the properties of the picture set, placed here, For the next look in time (much nonsense):

The attributes in Css2 about background are:

• Background-color: Specifies the color of the fill background, does not draw the picture only needs a solid color background, in this case can also be used directly

Background: #eee;

• Background-image: Referencing a picture as a background, such as

  Backgroud-image:url ("img/bg.jpg");

• Background-position: Specify the position of the element background picture, this many people are not accustomed to use, but it is quite useful, the actual picture in the upper left corner of the corresponding element is the upper left corner, when you intend to use pixels to locate the time, you can use:

  background-position:0 0;//The first number represents the x-axis horizontal position, the second number represents the y-axis vertical position background-position:0 100px;

When your element size does not apply to pixel settings, you can also use other values, such as

Background-position:top right; The top of the picture corresponds to the right element of right of the top image of right background-position:  100% 50%; Set the picture position using the percent value of the element, ditto

• Background-repeat: Decide whether to repeat the background picture, the value is as follows:

  Background-repeat:repeat;       Pictures can be repeated background-repeat:no-repeat; Images cannot be duplicated background-repeat:repeat-x;    The picture can be repeated background-repeat:repeat-y on the x-axis;    The picture can be repeated background-repeat:inherit on the y-axis;       

• Background-attachment: Determines whether the background graph scrolls with the page, with the following values:

  Background-attachment:scroll; The default value; Indicates that the background clings to the element background-attachment:fixed;  The background does not scroll with the element, and when the page is down, the background is in the original position relative to the browser background-attachment:inherit;//follows the parent element's settings

When you want to set multiple properties for background, you can set each one individually, or you can combine them into a single line, written in one property:

Background:transparent URL (image.jpg) 50% 0 scroll repeat-y;

Many properties have been added to background in CSS3:

• Background-color, set the size of the picture and take several values:

    Background-size:contain;     Reduce the image to fit the dimensions of the element (picture aspect ratio unchanged)  background-size:cover;       Expand the picture to fill the element (picture aspect ratio unchanged)  background-size:50% 100%;    

• Background-clip, background trim, can control the display position of the background very well: the values are:

  Background-clip:border-box;   The background is displayed within the border Background-clip:padding-box;  The background is displayed within the padding (not within the border) Background-clip:content-box;  Show backgrounds only within content (not in padding, not in borders)
  

There are two properties, Background-break and Background-origin, I have not used these two properties, looked at the online explanation feel no big use, here will not write down fraught.

CSS in the background of the knowledge point is very broad and profound, the future has a new understanding, and then add to here.

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

A summary of some of the settings in CSS for pictures (background)