3 Background Properties
It provides more background properties in CSS3, here only two of the more common attributes, other attributes can get help from the manual. In CSS3, the background image may be provided by a plurality of background-image or a background property container, that is to say can be different background images into a block element. URL can be separated by commas between multiple background images. If there are multiple background images, while others have only one property, then all background images are applied to the property value. Code as follows:
A new feature of CSS3 background image resizing is provided, which allows developers the freedom to control the size of the background image. In CSS2, the size of the background image is not controlled in the style, such as background images in order to make an area full, queen or re-do chart points, or it can only be filled in a tiled fashion. Providing CSS3 background-size attribute so that the developer may be directly scaled to fill the background image area, the size of the background image may be provided, and then to set a good size tile this area. background-size attribute requires one or two values (one is required, one optional), the value is either a pixel (PX), or as a percentage (%) or auto, is a specific value may also cover, contain . The sample code is as follows:
Wherein a first background-size value for the width specified background image, the second value for the height of the specified background image. If only a background-size setting value, then the second default value (except Contain and cover) to auto. Background-size attribute specific values as follows.
Ø cover: maintain the aspect ratio of the picture itself, the picture will zoom to the area is completely covered by the definition of the background.
Ø contain: holding aspect ratio picture itself, the image scaling to adapt to the width or height define the background area.
4 text attributes
About text of the new CSS3 properties There are many properties in common in these two: one is the text-shadow property can add shadows to text, the other is to force the word-wrap attribute to the word line breaks were processed. Text-shadow property requires a higher version of the browser, for IE, at least need to support IE 10 or later, as Firefox, Chrome, Safari and Opera and other browsers completely support this new property. Perhaps we often learn from some foreign topics, found that some title would look good with shadows, but can not be displayed properly in IE, this credit is the text-shadow property. word-wrap property can be regarded as a new attribute it has been widely supported by almost all major browsers support this property, even if IE is no exception.
4.1 to text with shadow text-shadow property
text-shadow property is one of several properties that we can omit the prefix, the shadow border attribute properties (box-shadow) Similarly, contains four parameters: horizontal shading, vertical hatching, shading and color distance blur, wherein The first three parameters can be expressed by a negative value. The following presents an example of a simple code:
4.2 Forced word wrap word-wrap property
When the word appears particularly long paragraph, if not force a line, a word may lead to a large spill or wrap directly lead to end of the line to leave a lot of gaps, which are making our text becomes very tidy, word-wrap attribute can be used to solve this problem. Consider the following simple usage:
