背景与渐变

背景与渐变

背景颜色基础知识

表示方法：
background-color: #ff0ff00 rbg rgba

paddding 区域是有背景颜色的！

背景图片基础知识

background-image: url(相对或者绝对路径或者外链) 相对路径从css出发的路径

背景图片的重复模式

background-repeat: repeat repeat-x repeat-y
no-repeat

背景尺寸

background-size: 300px auto; (宽度300px 高度等比例调整)
background-size: 50% auto; (宽度盒子宽度的一半 高度等比例调整)
background-size: contain; (智能容纳到盒子里，图片要完整)
background-size: cover; (图片覆盖整个盒子，图片可以不完整)

背景裁切（不常用）

background-clip:
border-box（默认值padding区和边框也有背景） padding-box（裁切到padding区，边框没有） content-box（裁切到内容区，padding区和边框都没有）

背景固定

background-attchment:
fixed（自己的滚动条，全局滚动条，都不动）
scroll（默认值，自己的滚动条不动，全局滚动条的动）
local（自己的滚动条，全局滚动条，都动）

背景图片位置

图片里面画的位置
background-position: 100px 200px; (左，上)
background-position: center center;
background-position: bottom center;
background-position: right top;

线性渐变

background-imgage: linear-gradient(to right,blue, red);
渐变方向： to right, 45deg
可以有多个颜色
linear-gradient(to right, blue, yellow ,red)

径向渐变（不常用）

radial-gradient(50%, 50%, red, blue);
圆心坐标: 50% 50%

浏览器私有前缀

Chrome: -webkit-
Firefox: -moz-
IE,Edge: -ms-
Opera: -O-