background-image

属性用于为一个元素设置一个或者多个背景图像

语法

1. 每一个背景图片可以是关键字 none 或者 <image>. 如果指定多张背景图片, 就需要使用逗号 , 将图片分开
2. none
   • 表示无背景图
3. <image>
   • 是一种表示二维图像的 CSS 数据类型. 可以表示下面的数据
   • url(): 既可以是互联网的图片, 也可以是本地的图片

     • .box1 {
         background-image: url(https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Zmxvd2VyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
         background-image: url(../../float/coffee-whole.png);
       }
       

   • <gradient> 渐变类型

     • .box2 {
         background-image: linear-gradient(#348e42, #9852ac);
       }
       

   • element() 从任意的 HTML 元素生成 <image> 类型的值. 目前这个函数只在 Firefox 中支持, Chrome 暂不支持

     • <div class="box box2" id="box2"></div>
       <div class="box box3"></div>
       

     • .box2 {
         background-image: linear-gradient(#348e42, #9852ac);
       }
       .box3 {
         background-image: element(#box2);
         background-image: -moz-element(#box2);
       }
       

     • 

• image(): 这个函数类似url()函数, 但是多了一些额外的功能, 比如可以指定图片的方向, 只展示图片的部分等. 😟但是这个函数目前所有浏览器都不支持

• 由 cross-fade() 函数定义的两张或者多张图像的混合

  • <div class="box box4"></div>
    <div class="box box5"></div>
    

  • 📕注意在 Chrome 等 浏览器要加 -wekbit- 前缀. 下面语法的意思是第一张图片 25% 的透明度, 第二章图片 75% 的透明度

  • .box4 {
      background-image: -webkit-cross-fade(
        linear-gradient(red, orange),
        linear-gradient(green, blue),
        75%
      );
      background-image: cross-fade(
        linear-gradient(red, orange),
        linear-gradient(green, blue),
        70%
      );
    }
    .box5 {
      background-image: linear-gradient(green, blue);
    }
    

  • 为了对比效果, 下面的图是不加任何渐变混合的图像, 可以看到上面的混合图像中蓝色变得更加紫色, 绿色变得有点暗, 看起来很脏
  • 

• image-set():

  • 让浏览器从一组图像中选择最适合当前设备屏幕的图片, 主要为了高分辨率屏幕

规则

1. 在绘制图像时, 图像一层叠一层, 先指定的图像会在之后指定的图像上面绘制

   • <div class="box box6"></div>
     <div class="box box7"></div>
     

   • .box6 {
       background-image: linear-gradient(green, blue),
                       url(../../float/coffee-whole.png);
     }
     .box7 {
       background-image: url(../../float/coffee-whole.png),
                       linear-gradient(green, blue);
       background-size: contain;
       background-repeat: no-repeat;
     }
     

   • 

2. 元素的 border 在 background-image 之上绘制, 但是 background-color 在图像下绘制, 具体如何控制盒子和边框的关系需要使用 background-clip 和 background-origin

   • MDN 建议仍然指定 background-color 属性, 如果图像无法被加载(比如网络断开)那么就会展示背景色

   • <div class="box box8"></div>
     

   • .box8 {
       border: 5px solid red;
       background-color: rebeccapurple;
       background-image: url(../../float/coffee-whole.png);
       background-size: contain;
       background-repeat: no-repeat;
     }
     

   • 

3. 如果指定的图像因为不存在等原因而无法绘制, 浏览器会此情况等同于其值为 none

4. 使用 backgroun-color 兜底

   • 如果使用 background 简写属性同时设置 background-image 和 background-color, 一定要将 background-image 写前面. 因为 MDN 定义中其语法为下
   • 
   • 其中 * 表示其前面的值出现0次, 1次或多次, 所以顺序是固定的

简单的应用

1. 在 Tailwind CSS 官网有这么一种实现效果. 就是图中几千字文章, 而且我发现这种效果在 Origin OS OCEAN(vivo 新系统)也很常见

   • 

   • 可以用 background-image 实现

   • <div class="box10">几千字文章</div>
     

   • .box10 {
       background-image: linear-gradient(transparent 70%, skyblue 69%);
     }
     

   • 

   • 📕CSS代码中故意使两种颜色范围发生重叠, 不然蓝色会出现渐变, 而不是像图片中这样由透明一下子变为蓝色