15天前端学习-第十一天（个人记录）

背景图的尺寸问题
background-size:宽 高;功能:可以设置背景图大小,但可能会影响到图片的质量(一般不用)。
background-size:cover(覆盖);功能:将图片等比例放大铺满容器,可能会溢出,溢出部分会被隐藏。
background-size:contain(包含);功能:将图片等比例放大,当宽或者高碰到容器边框了就会停止。
cover与contain有点相似,contain与cover的区别就是撞到边框会停下,不会溢出,但剩下的部分就不会被填充。

背景图的基点位置
background-origin: content-box; 基于内容左上角的定位,当有padding时会,定位在paadding内。
background-origin: border-box;基于边框左上角的定位,

背景图的裁剪
background-clip: content-box;内容外的部分,背景图会被裁剪,比如在边框,padding内的背景图。

背景图线性渐变
background-image:linear-gradient(颜色1,颜色2,…);可以设置多个颜色,默认由上往下渐变。
改变渐变的方向: linear-gradient(to right top,…);在参数表颜色前设置渐变方向。
也可以设置渐变的角度,0度是在下方:linear-gradient(0deg,…);正值顺时针旋转,负值逆时针。
设置渐变的颜色强度:linear-gradient(颜色1 10%,颜色2 50%);颜色1从10%开始过度到颜色2,从0%到10%全是颜色1。

背景图径向渐变
background-image:radial-gradient(颜色1,颜色2);由中心点开始渐变。

通过设置容器大小,背景渐变,可以做一些渐变类的动画(动画行为中设置背景定位)。

通过渐变百分比以及background-size形成的效果