CSS background-image

原创已于 2022-03-17 20:58:26 修改 · 7.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

于 2022-03-03 21:51:47 首次发布

css 专栏收录该内容

51 篇文章

订阅专栏

这篇博客详细介绍了CSS中的background-image属性，包括none、<image>、渐变、元素引用、image()函数、cross-fade()函数、image-set()函数的用法。通过实例展示了如何创建背景渐变、混合图像、选择适合设备的图片以及处理图像不可用的情况。还提到了background-color作为备用选项的重要性，并给出了TailwindCSS中的一种文字背景效果实现。

`background-image`

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

语法

每一个背景图片可以是关键字 none 或者 <image>. 如果指定多张背景图片, 就需要使用逗号 , 将图片分开
none
- 表示无背景图

<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():
- 让浏览器从一组图像中选择最适合当前设备屏幕的图片, 主要为了高分辨率屏幕

规则

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

<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;
}

元素的 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;
}
```
如果指定的图像因为不存在等原因而无法绘制, 浏览器会此情况等同于其值为 none
使用 backgroun-color 兜底
- 如果使用 background 简写属性同时设置 background-image 和 background-color, 一定要将 background-image 写前面. 因为 MDN 定义中其语法为下
- 其中 * 表示其前面的值出现0次, 1次或多次, 所以顺序是固定的

简单的应用

在 Tailwind CSS 官网有这么一种实现效果. 就是图中几千字文章, 而且我发现这种效果在 Origin OS OCEAN(vivo 新系统)也很常见
- 可以用 background-image 实现
- ```
<div class="box10">几千字文章</div>
```
- ```
.box10 {
  background-image: linear-gradient(transparent 70%, skyblue 69%);
}
```
- 📕CSS代码中故意使两种颜色范围发生重叠, 不然蓝色会出现渐变, 而不是像图片中这样由透明一下子变为蓝色