CSS efficient development practices: CSS 3, LESS, SASS, Bootstrap, Foundation-Reading Notes (1) set the background image

CSS efficient development practices: CSS 3, LESS, SASS, Bootstrap, Foundation-Reading Notes (1) set the background image

In addition to computer access to the Internet, tablets, smartphones, Smart TVs, and other devices can access the Internet. In the multi-device era, building a multi-screen experience is not as difficult as we have heard. But does this increase the difficulty of learning CSS? I don't know how to get started. I only know a little basic CSS syntax. In the mobile Internet age, is it because we are outdated ?? Let's take a good look at CSS efficient development practices: CSS 3, LESS, SASS, Bootstrap, and Foundation to boost your future!

5.1 set the background image size.

Before CSS 3 appears, the size of the background image is determined by the actual size of the image. If the same image needs to be used as the background in multiple different places, it must be made of different sizes using a drawing tool, which increases the workload of developers, on the other hand, it also occupies more disk space and network space. In CSS 3, developers can use the background-size attribute to specify the size of the background image, so that they can reuse the background image 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; }

　　

The most basic usage is to directly use the length unit or percentage to specify the size of the background, where 1st values are width and 2nd values are height. If only one value is set, the height defaults to auto.

Background-size has two options: cover and contain. Both options do not cause proportional distortion of the image. 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.

First, set a container whose height and width are both 300 pixels, and then set a 1600? ×? The image size of 1200 is set 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; } style> <div class="container"> div>

　　

As shown in Figure 5.1, because the background depends on the size of the background image, but the background image is too large, only the upper left corner of the source image is displayed.

Figure 5.1 original image background

Add background-size in the next step, as 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;/* set the width to 100% and the height to 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 see that the entire picture is displayed. The width is equal to the container width, and the height is generated based on the ratio of the source image. The background image with the same proportion as the source image is obtained by using background-size: contain; it is equivalent to using background-size: 100% auto ;.

To fully occupy the height of the container, you only need to set background-size: auto 100%; or background-size: cover;, as shown in Figure 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 image; otherwise, it will not take effect.

At last, let's take a picture of the cover of a book. We can learn and communicate with each other.