[Front-end] zoom and gradient background

Background zoom

Background-size

    background:     可放/*颜色 图片  平铺  位置  滚动*/;
    border: 1px solid red;
    /*background-size:  w  h 规定背景图像的尺寸;*/
    /*background-size: 100px  100px;*/
    /*background-size: 100px;  如果只有一个值  后面一个值默认为 auto  等比例缩放*/
    /*background-size: cover; 图片部分可能不完整,超出部分会被切掉 */
    /*background-size: contain;   div会包含图片*/

By setting background-size background image size, as we set img size, as do the screen adaptation in a mobile Web application development very extensive.

Its parameters are as follows:

A) The unit of length may be provided (px) or percentage (percentage set, with reference to the width and height of the box)

b) set to cover, it will automatically adjust the zoom ratio to ensure pictures are always filling up the background area, if the overflow section will be hidden. The most we usually use cover

c) setting will automatically adjust the zoom to contain, to ensure that pictures are always displayed completely in the background area.

Background gradient

Linear gradient during the transition color along a straight line: from left to right, from right to left, from the top in the end portion, from the bottom to the top or along any arbitrary axis.

Compatibility is a serious problem, we are here to explain the Linear Gradient

Syntax:

background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色);
        /*background: -webkit-linear-gradient(top, red, green);*/
        /*background: -webkit-linear-gradient(left, red, green);*/
        /*background: -webkit-linear-gradient(left top, red, green);*/
background:-webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色位置....);
        /*background: -webkit-linear-gradient(top, red 0%, green 50%, blue 100%);*/

Guess you like

Origin www.cnblogs.com/Kighua/p/11575210.html