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%);*/