标签：平铺 repeat 颜色 -- 背景 background 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。