Web前端基础笔记：第十章 CSS-背景

10.1 背景颜色

• 渐变色

/* 线性渐变（渐变方向 开始颜色 结束颜色） */
background:linear-gradient(to right,#95ca47,#4dc891);

渐变方向
渐变方向使用的语义化英文实现，具有如下值

• to right/to left 向右/向左渐变
• to top/to bottom 向上/向下渐变
• to right bottom/to right top 向右下/向右上渐变
• to left bottom/to left top 向左下/向左上渐变
• xxx deg xxx 范围（0到360）更精准的渐变方向

渐变位置

linear-gradient(to right,#95ca47 30%,#4dc891 70%);

我们可以在每个色值后面跟一个百分比，px，来约定变色起止位置。

10.2 背景图片

1. 背景图片出现重复

   禁止图片重复：background-repeat：no-repeat；
background-repeat的值：
   repeat：这是默认值。如果背景图片比容器小，将在垂直和水平方向进行重复
   repeat-x：背景图片只在水平方向重复
   repeat-y：背景图片只在垂直方向重复
   no-repeat：背景图片将只显示一次，不重复

2. 背景图片不居中

   使用background-position：center；进行解决
   background-position的值：

 top left；    top center；    top right；    
 center left； center center； center right；
 bottom left； bottom center； bottom right；

描述：
比如：`background-position：top left；`   
效果等于：`background-position-x：left；background-position-y：	top；`
如果只写一个关键词，那么另一个关键词默认是`center`
（2）x% y%：第一个值是水平位置，第二个值是垂直位置
（3）xpx ypx：第一个值是水平位置，第二个值是垂直位置

3. 背景图片撑满整个容器

   设置图片大小的属性：backgound-size

   属性值：
   cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
   contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
   xpx ypx：手动设置宽度和高度
   x% y%：手动设置宽度和高度相对于容器的百分比

4. background合并写法

   如：

background-image: url(https://style.youkeda.com/img/ykd-components/logo.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;

合并后：

background: url(https://style.youkeda.com/img/ykd-components/logo.png)
no-repeat center / contain；