css 背景

背景图片

• repeat:背景图像在纵向横向平铺

​ background-repeat: repeat;

• no-repear:背景图像不平铺

​ background-repeat: no-repeat;

• repeat-x:背景图像横向平铺

​ background-repeat: repeat-x;

• repeat-y：背景图像纵向平铺

​ background-repeat: repeat-y;

​ background-position: x y;

• 方位名词：top，left,bottom,right,center

​ 精确单位：px 百分数

• 跟顺序无关

​ 如果我就指定一个方位名词，别一个省略，则第二个值默认居中对齐

​ background-position:bottom;

• 参数是精确单位，第一个肯定是x坐标，第二个一定是y坐标

​

​ .tp{

​ width: 800px;height: 400px;

​ background: url(logo.png) no-repeat blue right 100px;

• 如果指定一个数值，那么该数值一定是x坐标，另一个垂直居中 */

​ background-position: 20px;

• 混合单位：第一个是x坐标，第二个是y坐标 */

​ background-position: right 100px;

背景固定

  -  scroll：背景图像市跟随对象内容滚动

  ​       background-attachment: scroll;

  - fixed：背景图像固定

  ​      background-attachment: fixed;

  **背景透明**

     -  rgba:红 绿 蓝 alpha：透明度 取范围0-1之间

     ​       

     ​      background: rgba(0, 0, 0, .3);

设置图片大小

• 设置图片大小

​ background-size: auto;

• 默认值，不改变背景颜色的高度和宽度
• 第一个值为宽，第二个值为高，当设置一个值时；将其作为图片宽度等比缩放

​ background-size: 100px 50px;

• 0%-100%之间任意一个值，将背景图片宽高按百分比显示，当设置一个值时也可以作为图片宽度来等比缩放

​ background-size: 10% ;

• 将背景图片等比缩放填满整个容器

​ background-size: cover;

• 将背景图片等比缩放至某一边紧贴容器边缘

​ background-size: contain;