CSS的背景属性

背景颜色

background-color：值

• 合法的颜色值
• 颜色名；16进制表示；rgb；rgba
• 当没有设置时，默认的背景色是透明的，transparent

     background-color: antiquewhite;
     background-color: #0000ff;
     background-color: rgb(255, 0, 0); 
     background-color: rgba(255, 0, 0,0.6);

背景图片

background-image:url（图片路径）

• 默认值无图片
• 若同时设置background-color和image则同时生效

     background-color: rgba(255, 0, 0,0.6); 
     background-image: url('SeanXiao.png（图片地址）');

背景重复

若元素的宽高大于图片的宽高，则会发生背景重复

background-repeat:值

• 默认值：repeat
• no-repeat不重复
• repeat-x 在x轴上重复
• repeat-y 在y轴上重复

    background-image: url(duck.jpg);
    background-repeat: repeat-x;

背景尺寸

• 使用背景图片时，可以设置背景的宽高
• background-size：宽度 高度
• 尺寸单位：背景图片的宽度和高度是一个固定的值

      background-size: 100px 600px;
      background-size: 10em 5em;
      //以父元素的百分比来设置图片的宽度和高度
      background-size: 50% 60%;

• contain：把背景图片扩展至最大尺寸，使宽度或者高度完全适应内容区域，但保持原有的宽高比例
• cover：把背景图片扩展至足够大，使背景图片完全覆盖区域，但背景图片的某些部分无法显示在元素区域中
• 若只设置一个值如 background-size：200px === background-size：200px auto，另一个值为auto，图片不变形，保持原有的比例

背景定位

background-position：x（水平位置） y（垂直位置）

• 方向定位：top bottom right left center
• 当只设置一个值时，另一个值为center

      background-position: left top;
      background-position: 40px 100px;
      background-position: left;
      background-position: center center;

背景固定

background-attachment：值

• scroll：下拉时，背景会随着滚动条上移
• fixed：下拉时，背景不会随着滚动条上移

      background-attachment: scroll;
      background-attachment: fixed;

背景属性简写

background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 100px 100px/800px 500px fixed;

background：颜色值 背景图片 背景重复 背景定位/背景尺寸 背景固定

• 可以在一个属性background中设置所有的背景属性，用空格隔开
• 如果某个值不写，也不会出问题
• 使用背景属性简写输入的代码最少，浏览器对背景简写的支持度也更高

关于‘背景定位/背景尺寸’

• 当两组值都存在时，需要用‘ / ’隔开
• 当在背景简写中只出现一组值时，表现为背景定位
• background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 800px 500px fixed; （800px 500px为背景的位置信息）
• background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 100px 100px/800px 500px fixed; （100px 100px为背景的定位位置信息，800px 500px为图片的尺寸大小信息）
• background: rgba(255,0,0,0.5) url(SeanXiao.png) no-repeat 0 0/800px 500px fixed; （ 0 0为背景的定位位置信息，800px 500px为图片的尺寸大小信息）

原文地址：https://blog.csdn.net/qq_56807425/article/details/144437409

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！