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

Source: Internet
Author: User

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.


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



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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.