Practical practice of efficient CSS development: CSS 3, LESS, SASS, Bootstrap, Foundation Reading notes (1) Setting the background image_html/css_WEB-ITnose

With the new development of technology, in addition to computers that can access the Internet, other devices such as tablets, smartphones, and smart TVs can also access the Internet. In the era of multiple devices, building a multi-screen experience is not as difficult as it sounds. But this also makes it more difficult to learn CSS? I don’t know how to get started and only know a little basic CSS syntax. In the era of mobile Internet, are we so behind the times? ? Study hard, read "CSS Efficient Development Practice: CSS 3, LESS, SASS, Bootstrap, Foundation" to cheer up your future!

5.1 Set the size of the background image

Before the advent of CSS 3, the size of the background image was determined by the actual size of the image. If the same picture is to be used as the background in multiple different places, it must be made into different sizes using drawing tools. This increases the workload of the developer on the one hand, and also takes up more disk space and cyberspace. In CSS 3, developers can use the background-size attribute to specify the size of the background image, so that the background image can be reused in different environments. For example, the following code:

1 2 3 4 5

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

1 2

3

4

5

div{

background:url(img_flwr.gif);

1 2 3 4 5 6 7 8 9 10

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

background-size :80px 60px; background-repeat:no-repeat; }

　 The most basic usage is of course to directly use the length unit or percentage to specify the size of the background, where the first value is the width and the second value is the height. If only one value is set, the height defaults to auto. background-size also has two options: cover and contain. Neither option will distort the image proportions. Cover is equivalent to the case where the width is equal to the width of the element and the height is set to auto; while contain is equivalent to the case where the height is equal to the height of the element and the width is set to auto. Here is an example. First, set a container with a height and width of 300 pixels, and then set a 1600×?1200 size image as the background of the image:

1 2 3 4 5 6 7 8 9 10

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

　

The effect is shown in Figure 5.1. Since the background depends on the size of the background image, but the background image is too large, only the upper left corner of the original image is actually displayed. part.

Figure 5.1 Original image background

Next, add background-size, the effect is shown in Figure 5.2.

1 2 3 4 5 6 7 8 9 10 11 12 13

< style > .container{    background:url(naicha.jpg) no-repeat;    background-size: 100% auto;    /*设置宽度100%，高度自动*/    /*使用background-size: 100% auto; 等效于使用background-size: contain; */    -webkit-background-size: 100% auto;    border: 2px solid black;    margin:auto;    width:300px;    height:300px; } < div class="container">

1 2

3

4

5

6

7

8

9

10

11

12

13

< style > .container{ background:url(naicha .jpg) no-repeat; background-size: 100% auto; /*Set width to 100%, height automatically*/ /*Use background-size: 100% auto; etc. Effective for using background-size: contain; */ -webkit-background-size: 100% auto; border: 2px solid black; margin:auto; width:300px; height:300px; } < div class= "container">

　 Now readers can It is found that the full picture of the image is displayed. The width is equal to the width of the container, and the height is generated according to the proportion of the original image. Finally, a background image with the same proportion as the original image is obtained. Using background-size: contain; is equivalent to using background-size: 100% auto. ;. If you want to occupy the full height of the container, you only need to set background-size: auto 100%; or background-size: cover;. The effect is shown in Figure 5.3. Figure 5.2 background-size: contain effect Figure 5.3 background-size: cover effect Note: background- The size must be set after specifying the image, otherwise it will not take effect. Finally, let’s take a picture of the cover of the book. Let’s share it with those who are interested in learning.