7.1 背景属性

背景缩写缩写可以卸载一个声明中设置所有的背景属性
背景图像支持引入多个图像
主要属性有:
background-color
background-image
background-repeat
background-position
backgournd-attchment
background-size
background-origin
background-clip


7.2 背景颜色

background-color

  • 指定要使用的背景颜色 例如:background-color:#ffcc00
  • 可以简写为background
  • backround-color 不能继承，其默认值是trandsparent。trandsparent有透明之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
  • transparent 指定背景颜色应该是透明的，默认值。
  • inherit 指定背景颜色，应该从父元素继承
  1. <style>
  2. .box{
  3.     width:650px;
  4.   height:32px;
  5.   background-color:orange;// 颜色
  6.   color:#fff; // 字体颜色
  7.   text-aligh:center;//字体内容水平居中
  8. }
  10. div{
  11.     width:200px;
  12.   height:200px;
  13.   backgournd-color:darkbule;
  14.   margin:0 auto;//上下0 左右auto 块元素水平居中
  15.   line-height:200px;//垂直居中
  16. }
  17. </style>

7.3 背景图片

background-image

  • url(‘图像的url路径地址’)图像的url
  • none 表示北京上没有防止任何图像，这就是默认值
  • inherit指定背景图像应该从父元素继承
  • 一个元素可以引入多张背景图片，指定要使用的一个或者多个背景图像，默认情况下background-image放置在元素的左上角，并重复垂直的水平方向。
  • backgournd image:url(‘pic.png’),url(‘pic2.png’)… …
  • backgournd image 属性不能继承

7.4 背景重复

  • 指定如何重复背景图像，默认情况下，重复background-image的垂直和水平方向
  • repeat 背景图像向垂直和水平方向垂直。这是默认
  • repeat-x 只有水平位置会重复背景图像
  • repeat-y 只有垂直位置会重复背景图像
  • no-repeat background-image不会重复
  • inherit 指定背景重复应该从父元素继承
  1. .logo{
  2.     width:300px;
  3.   height:300px;
  4.   backgournd-image:url('../xxx/png');
  5.   backgournd-repeat:repeat x;//平铺的方式（重复）
  6. }

7.5 背景定位

  • backgournd-position属性设置背景图像的起始位置;
  • xpos ypos 第一个值的水平位置，第二个值是垂直。左上角是0。单位可以是长度值px，关键字和百分数值
  • 关键字成对出现left right top bottom center，如果仅指定一个关键字，其他值将会“center”
  • x% y%第一个值水平位置，第二值是垂直。左上角是0%0%。
  • inherit 指定background-position属性设置应该从父元素继承
  1. .logo{
  2.     width:400px;
  3.     height:400px;
  4.     backgournd-color:#3385ff;//背景颜色
  5.   backgournd-image:url('./xxx.png');
  6.     backgournd-repeat:no-repeat;
  7.   backgournd-position:50px 50px;//x轴的坐标(水平方向)y轴的坐标方向(垂直方向) x轴越大 越往右 x轴越大 越往下
  8.     //50% 50% > center center //中心位置
  10. }

经常使用在雪碧图中

7.6 背景关联

backgournd-attachmen

  • 设置背景图像是否固定或者随着页面的其余部分滚动
  • scroll 背景图片随页面的其余部分滚动。这是默认
  • fixed 背景图像是固定的
  • inherit 指定background-attachment的设置应该从父元素继承
  1. *{
  2.     padding:0px;
  3.   margin:0px;
  4. }
  6. .banner{
  7.     width:100%;
  8.   height:800px;
  9.   backgournd:url(../xxx.png) no-repeat
  11. }
  13. .banner01{
  14.     width:100%;
  15.   height:800px;
  16.   backgournd:url(../xxx.png) no-repeat
  18. }
  20. .banner02{
  21.     width:100%;
  22.   height:800px;
  23.   backgournd:url(../xxx.png) no-repeat
  24.    backgournd-attachmen:fixed;// 可以固定不动
  25. }

7.7 设置对象的背景图像的尺寸大小

background-size

  • 用长度值指定背景图像大小。不允许负值；
  • 用百分比指定背景图像大小。不允许负值。
  • auto背景图像的真实大小
  • cover将背景图等比例缩放到完全覆盖容器，背景图像有可能超出容器；
  • contain将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
  1. .pic{
  2.     width:200px;
  3.   height:1600px;
  4.   background:url('../xx.png')
  5.   background-size:300px 300px; // x轴  y轴
  6. }

7.8 设置对象的背景图像向外裁剪的区域

background-clip

  • padding-box:从padding区域(不含padding)开始想外裁剪背景;
  • border-box:从border区域(不含border)开始向外裁剪背景
  • bontent-box:从content区域开始向外裁剪背景
  • text:从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此极客实现使用背景作为填充色之类的遮罩效果。
  1. .pic{
  2.     width:200px;
  3.   height:1600px;
  4.   background:url('../xx.png')
  5.   background-size:300px 300px; // x轴  y轴
  6.   backgound-clip:border-box;
  7. }

7.9 设置背景图像的参考原点(位置)

background-orign

  • padding-box:从padding区域(含padding)开始显示背景图像
  • border-box:从border区域(含border)开始显示背景图像
  • content-box:从content区域开始显示背景图像

image.png