CSS Efficient development Combat: CSS 3, less, SASS, Bootstrap, Foundation--Reading Notes (1) Setting the background map

The new development of technology, in addition to computers can be connected to the Internet, tablet computers, smartphones, smart TVs and other devices can access the Internet. In the multi-device age, building a multi-screen experience is not as difficult as it is heard. But does this also add to the difficulty of learning CSS? Do not know how to get started, only a bit of basic CSS grammar, in the mobile internet era, we are so outdated ?? Study well, read the "CSS Efficient Development Combat: CSS 3, less, SASS, Bootstrap, Foundation", to their future cheer!

5.1 Setting the size of the background map

Before the advent of CSS 3, the size of the background image is determined by the actual size of the picture. If the same picture is to be in many different places as the background, you have to use a cartographic tool to make different sizes, which increases the workload of developers, on the other hand, also occupy more disk space and network space. In CSS 3, developers can use the Background-size property to specify the size of the background image, which allows them to reuse the background image in different environments. For example, the following code:

Div{background:url (img_flwr.gif); background-size:80px 60px;background-repeat:no-repeat;}

　　

The most basic usage of course is to specify the dimensions of the background directly using the length units or percentages, where the 1th value is the width and the 2nd value is the height. If you set only one value, the height default is auto.

Background-size also has two optional options: Cover and contain. Neither of these options will cause image scale distortion. Where cover corresponds to the width equal to the element width, the height is set to auto, while the contain is equal to the height of the element height, width set to auto, the following examples.

First, set up a container with a height and width of 300 pixels, and then set a picture of a 1600?x?1200 size to the background of the picture:

<style>.container{  Background:url (naicha.jpg) no-repeat;  border:2px solid black;  Margin:auto;  width:300px;  height:300px;} </style><div class= "Container" ></div>

　　

As shown in effect 5.1, because the background depends on the size of the background image, the background image is too large to actually show only the upper-left part of the original.

Figure 5.1 Original picture background

Next, add Background-size, as shown in effect 5.2.

<style>.container{  Background:url (naicha.jpg) no-repeat;  background-size:100% Auto;    /* Set width 100%, height auto */  * Use background-size:100% Auto, equivalent to use background-size:contain; */  -webkit-background-size : 100% auto;  border:2px solid black;  Margin:auto;  width:300px;  height:300px;} </style><div class= "Container" ></div>

　　

Now the reader can find the picture of the full display, width equal to the width of the container, height is generated according to the original proportions, and finally get the original proportion of the background picture, using Background-size:contain; equivalent to using background-size:100% auto;.

If you want to fill the height of the container, just set Background-size:auto 100%, or Background-size:cover, as shown in effect 5.3.

Figure 5.2 Background-size:contain Effect

Figure 5.3 Background-size:cover Effect

Note: Background-size must be set after the specified picture, otherwise it will not take effect.

Finally, a book cover map, there is learning to communicate with

CSS Efficient development Combat: CSS 3, less, SASS, Bootstrap, Foundation--Reading Notes (1) Setting the background map