C3-背景颜色及背景图片

• 背景颜色---->background-color

颜色：transparent（透明色）/ 其他颜色

e.g：background-color: pink;

• 背景图片---->background-image

e.g：background-image: url(images/01.jpg);

效果展示：

  注：背景图片会默认平铺到整个盒子中

        

• 背景平铺---->background-repeat

参数：repeat-->背景平铺

      no-repeat-->背景不平铺

      repeat-x-->背景沿x轴横向平铺

      Repeat-y-->背景沿y轴纵向平铺

效果展示：

1.background-repeat: no-repeat;

              

2.background-repeat: repeat;  

              

3.background-repeat: repeat-x;

              

4.background-repeat: repeat-y;

              

注：背景颜色和背景图片可同时添加

• 背景图片位置---->background-position:x y;

x y：可以是方位名词（top,center ,bottom,left,right）;也可以是精确单位（10px,百分数）

e.g：background-position: top right;

效果展示：

                    

background-position: 15px 30px;

效果展示：

                     

• 背景固定---->background-attachment

参数：scroll-->背景图片随内容滚动（系统默认）

      fixed-->背景图片固定

• 背景属性的复合写法：

background：背景颜色 背景图片 背景平铺 背景图像滚动 图片位置；

e.g：background:rgb(206, 245, 250) url(images/03.png) no-repeat scroll center bottom;

效果展示：

                 

• 背景颜色半透明：background：rgba(o,o,o,0.4);

a表示alpha透明度，取值范围在0-1之间

e.g：background: rgba(32, 194, 216, 0.3);

标签：平铺,repeat,颜色,--,背景,background,C3,背景图片
来源： https://blog.csdn.net/qq_64369267/article/details/121515405