CSS中的background背景和应用

web.jpeg

我们在操作盒子div的时候 一般都会用到背景图片或者背景颜色等属性

1. background-image 背景图片

//设置 div的宽高和样式
 <style>
        div{
          width: 500px;
          height: 500px;
          background-image:url("../images/H5/3.jpg");
        }
    
    </style>

image.png

2. 如果只设置背景图片，盒子的宽度和高度大于图片的真实大小，图片默认是平铺的 ，这是要用到background-repeat这个属性来更改设置

 <style>
        div{
          width: 500px;
          height: 500px;
          background-image:url("../images/H5/3.jpg");
          /* 图片默认是 平铺的 */
          background-repeat: no-repeat;
         /* 设置背景颜色 */
          background-color: bisque; 
      
        }
    </style>

background-repeat:这个属性 还有2个值 ，repeat-x; x轴上横平铺,repeat-y; y轴上 平铺

image.png

3. 我们看到图片 在左上角显示，如果我们想更改背景图片的位置呢，这就要使用到 background-position属性

  <style>
        div{
          width: 500px;
          height: 500px;
          background-image:url("../images/H5/3.jpg");
          /* 图片默认是 平铺的 */
           background-repeat: no-repeat;
          background-color: bisque; 
          /* 方位名词没有顺序，谁写在前面都可以 */
          background-position: center center;
        
        }
    
    </style>

image.png

background-position里面使用的方位名词，top,left,bottom,right, 如果方位名词 只写一个 另外一个 默认是center

当然我们也可以精确到准确的位置比如background-position: 10px 10px; 注意:第一个参数值是x抽，第二是参数值是y抽

最后background-position属性是可以和 方位名词和坐标结合写的，比如:background-position: center -20px; 这就说明: 水平居中 垂直方向是 向上走了20像素

4.有时我们需要固定 背景图片需要使用到 background-attachment，此属性默认是scroll,如果我们想让 背景固定的话需要更改成fixed

 <style>
       body{
           background-image: url("../images/H5/ms.jpg");
           /* 背景固定  默认是scroll 滚动  fixed是固定的*/
           background-attachment: fixed; 
       }

Untitled.gif

我们在写background的属性的时候，可以综合简写，一般的格式是

/* 背景颜色 背景图片 背景平铺 背景滚动 背景位置 */
background: #336699 url("../images/H5/ms.jpg") no-repeat fixed center -25px;

6.前面说过背景 图片如果小于 盒子的宽高时，就会平铺，但是如果图片的真实大小大于我们盒子的宽高时，我们就需要用到 图片的缩放属性 background-size

其实background-size属性可以精确设置宽和高，但是一般不这样，我们一般在使用这个时，设置一个参数(宽度/高度) 那么另外一个 参数就会自适应

 div{
            width: 400px;
            height: 500px;
            background: #336699 url("../images/H5/l.jpg") no-repeat fixed left top;
            /* 背景图 缩放  参数:宽度 和 高度 */
            /* 修改一个 参数 另外一个可以自动缩放 */
            background-size: 100px;
      
        }

image.png

当然也可以设置百分比 background-size: 20%;'

  div{
            width: 400px;
            height: 500px;
            background: #336699 url("../images/H5/l.jpg") no-repeat fixed left top;
            /* 使用百分比 */
            background-size: 20%;
        }

image.png

其中比较重要的2个属性是 cover(经常使用) 和contain

那么 cover表示什么？ 它表示: 自动缩放比例，保证图片填充背景区域，如有溢出则会隐藏; 其实就是根据盒子的宽度和高度进行缩放，直到盒子的宽度和高度都被填充完全，超出的部分隐藏

 div{
            width: 400px;
            height: 500px;
            background: #336699 url("../images/H5/l.jpg") no-repeat fixed left top;
            /* cover:自动缩放比例，保证图片填充背景区域，如有溢出则会隐藏 */
            /* 等比缩放，图片要填充到盒子的宽度和高度，就是图片和满足盒子的宽度和高度，超过的部分被隐藏 */
            background-size: cover;
}

image.png

从上面的，结果中我们可以知道，如果使用cover这个属性，那么图片就会根据盒子的宽度和高度，进行填充，如果宽度被填充完全的话，而高度没有被完全填充完，就会继续将图片进行缩放，直到高度被完全填充，那么超出宽度的部分就会被隐藏掉

contain属性呢？ 它是也是按比例缩放，不过这个属性是，当一个参数完全填充了，另外一个参数，就不会再继续填充，来保证图片的完整性

 <style>
        div{
            width: 400px;
            height: 500px;
            background: #336699 url("../images/H5/l.jpg") no-repeat fixed left top;
       
            /* contain：等比例缩放的时候，如果有一个参数(宽度/高度) 达到 盒子的宽度/高度 那么另外一个参数 就不会再缩放，保证图片的完整性 */
            background-size: contain;

        }
    
    </style>

image.png

7. 背景半透明

这个属性比较简单

  <style>
     body{
         /* 背景颜色 背景图片 平铺 背景固定 背景位置 */
         background: #336699 url("../images/H5/king.jpg") no-repeat fixed top center;
     }
     div {
         height: 400px;
         /* 背景半透明 */
         background: rgba(0, 0, 0, 0.7);
     }
    </style>

8 .背景透明 transparent

 <style>
        div{
            width: 200px;
            height: 200px;
            display: inline-block;
            margin-left: 50px;
        }
        div:first-child {
            background: yellow;
        }

        div:nth-child(2){
            background: transparent;
            border: 1px solid #000000;
        }

        div:last-child{
            background: purple;
        }
    
    </style>

9.多背景图片

• background属性，设置多个背景图片，之间用逗号隔开，背景颜色，要放在后面，以免层叠覆盖掉

div{
            height: 500px;
            width: 700px;
            
            background: url("./images/timg.jpeg") no-repeat top left,
            url("./images/web.jpg") no-repeat bottom right pink;

            background-size: 50%;
           
        }

image.png

小例子

主要用到background-position属性，来更改图片的位置

 <style>
     a {
         width: 67px;
         height: 34px;
         background: url("../images/H5/110.png") no-repeat left top;
         /* 转化为块级元素 */
         display: block;
     }

     a:hover{
         background-position: left bottom;
     }
    </style>

Untitled.gif

10.background-origin

• background-origin背景图片根据盒模型的哪个区域来定位。

• border-box，图片相对于边框（Border）定位，

  
  image.png

• padding-box，图片相对于内边距框（Padding）定位

  
  image.png

• content-box，图片相对于内容框（Content）定位。

           padding: 20px;
           background-image: url("JD/images/banner_1.jpg");
            background-repeat: no-repeat;
            background-origin: content-box;

image.png

11. background-clip

• background-clip背景绘制区域，也就是背景可以被绘制的区域，基于盒模型 和 background-origin一样有
  border-box：边框以外被裁剪
  padding-box：内边距以外被裁剪
  content-box: 内容以外被裁剪
  3个属性