CSS Efficient development Combat: CSS 3, less, SASS, Bootstrap, Foundation--Reading notes (4) More flexible background of construction size

Compared with the traditional picture background, the use of CSS to construct background color can not only reduce the cost of network transmission, but also because of the control of its size is favored by developers.

If the designer has designed a background image as the title background, 5.18 shows. For users who browse the Web with a computer, the title basically does not have the phenomenon of folding, the layout is basically fixed width, so the direct use of the designer to give a background map. But this page is mainly displayed on the phone, the title according to the length of the different may account for 1 lines, may also account for 3 lines, if the use of pictures must be based on different circumstances to put a different background map, the implementation is very complex.

650) this.width=650; "Src=" http://img.blog.csdn.net/20141212142319448?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqva2dzzxc=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/ >

Figure 5.18 The designer gives the background

Fortunately, this background image is actually from left to right from dark violet to lighter blue and then to dark blue, then a linear gradient with a multi-color value is defined as a style:

. header{Background-image:-webkit-linear-gradient (left, #241a38, #012c57, #031a40); Background-image:- O-linear-gradient (left, #241a38, #012c57, #031a40); Background-image:-moz-linear-gradient (left, #241a38, #012c57, #031a40); Background-image:linear-gradient (left, #241a38, #012c57, #031a40);}

The CSS scheme is used instead of the picture, and if the title is folded, the title area is automatically propped up. No matter how many lines can be perfect fit, with very good flexibility, and greatly reduce the complexity of the implementation, but also save the image load caused by the network traffic, can be more than a swoop.

Have a learning to communicate together

650) this.width=650; "src=" http://images.cnitblog.com/blog/41113/201411/281416304184854.jpg "style=" border:0px; margin:0px;padding:0px;width:884px; "/>

CSS Efficient development Combat: CSS 3, less, SASS, Bootstrap, Foundation--Reading notes (4) More flexible background of construction size