背景图片的使用方法

背景颜色

 背景颜色应用于：
    内容区
    内间距区
    边框区
​
    颜色表现方式：
        颜色英语单词
        16进制代码  #
        rgb(0,0,0) 0-255
​
​
.box {
      width: 200px;
      height: 200px;
      border: 20px dotted tomato;
      padding: 50px;
      margin: 50px;
​
      background-color: yellowgreen;
      background-color: #ff00ff;
      background-color: rgb(0, 255, 255);
    }

背景图片

 背景图片的语法
  background-image: url();
      url:图片的路径，跟img的src属性一样
​
      背景图片默认从盒子的左上角开始显示，并且在水平方向和垂直方向上平铺
​
      如果盒子的大小比图片大小大，则在水平方向和垂直方向上平铺
      如果盒子的大小比图片大小 小，盒子多大，图片显示多大
​
       背景图片应用于：
         内容区
         内间距区
         边框区
​
      注意：插入背景图片时，一定要给盒子宽高
​
  .box3 {
      width: 500px;
      height: 500px;
      border: 20px dotted tomato;
      background-image: url(https://img1.baidu.com/it/u=3125142673,1739776984&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334);
    }
​
.box1 {
      width: 200px;
      height: 200px;
      border: 20px dotted tomato;
      padding: 20px;
      margin: 20px;
​
​
      /* 如果盒子的大小比图片大小 大，则在水平方向和垂直方向上平铺 */
      background-image: url(./image/bg1.jpg);
    }
​
内容会显示在背景图片上面

背景图片平铺方式

/* 背景图片平铺方式语法 */
/* 默认值  repeat 重复 */
background-repeat: repeat;
/* no-repeat 不重复（不平铺） 背景图片只显示一张 */
background-repeat: no-repeat;
/* repeat-x 只在水平方向上平铺 */
background-repeat: repeat-x;
/* repeat-y 只在垂直方向上平铺 */
background-repeat: repeat-y;

背景图片定位

​
背景图片定位
设置背景图片的起始位置
​
语法：
background-position: 水平， 垂直;
水平与垂直 之间以空格隔开
​
取值：
px
水平:正值向右，负值向左
垂直:正值向下，负值向上
​
如果只写一个值，另一值(垂直)以50%（垂直居中）位置显示
​
关键词：
left
top 
right 
center
bottom
​
/* 背景图片默认从盒子的左上角开始显示 */
.box1 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
/* position 定位，位置 */
/* 背景图片从 水平：30px   垂直：100px 开始显示*/
background-position: 30px 100px;
​
}
​
.box2 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
/* position 定位，位置 */
/* 背景图片从 水平：100px   垂直：100px 开始显示*/
background-position: 100px 100px;
​
}
​
/* 可以为负值 */
.box3 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
/* position 定位，位置 */
/* 背景图片从 水平：-10px   垂直：-10px 开始显示*/
background-position: -10px -10px;
​
}
​
/* 如果只写一个值，另一值(垂直)以50%（垂直居中）位置显示  */
.box4 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
background-position: 30px;
​
}
​
/* 右上角  */
.box5 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
/* 水平方向：居右   垂直方向：居上 */
background-position: right top;
​
}
​
/* 中心*/
.box6 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
/* 水平方向：居中   垂直方向：居中 */
background-position: center center;
background-position: center;
​
}

背景图片大小

​
background-size: 宽 高;
宽高两个值：空格隔开
​
* px：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个 值会被设置为 “auto”。
​
* percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如 果只设置一个值，则第二个值会被设置为 “auto”
​
​
图片本身有宽高（宽高比例），如果只设置一个宽度，高度会按照宽高比例进行放大或者缩小
​
​
/* 背景图片默认从盒子的左上角开始显示 */
.box1 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
​
/* size 大小 */
/* 背景图片 宽：200px  高：100px */
background-size: 200px 100px;
​
​
}
​
.box2 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
​
/* size 大小 */
/* 图片宽高比：65 65  1:1 */
/* 只设置宽度，则高度会按照1:1缩放 */
background-size: 100px;
background-size: 100px 100px;
​
}
​
.box3 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
​
/* size 大小 */
/* 图片宽高比：65 65  1:1 */
/* 只设置宽度，则高度会按照1:1缩放 */
/* 百分比：按照盒子宽高来计算的 */
/*
width:200px * 50%  = 100px  
height:200px * 20%  = 40px 
*/
background-size: 50% 20%;
​
}
​
​
/*
背景图片占满整个盒子
盒子有多大，背景图片就有多大
*/
.box4 {
background-image: url(./image/bg1.jpg);
background-repeat: no-repeat;
/*
width:200px * 100%  = 200px  
height:200px * 100%  = 200px 
*/
background-size: 100% 100%;
}