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
代码中故意使两种颜色范围发生重叠, 不然蓝色会出现渐变, 而不是像图片中这样由透明一下子变为蓝色