小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
最近在弄一个活动页，里面有一个活动列表，然后有个效果图，就是这样的。
有个展示，就是当用户成功预约活动之后，活动列表右下角，要显示“已预约”的角标。
折腾
跟设计确认了，那个 “已预约” 是一张图片来的，不用前端单独做处理，哈哈哈。
一开始的想法就是，那个“已预约”，就是一个小区块，然后覆盖上去即可。
但是我拿到设计提供的图片，发现原来不是一张小图片，而是一张 408px * 474px 的图片。
然后原来的想法，就实现不了，除非是自己在网上找工具，对图片进行了裁剪出对应一小块，按照原来的方案做出来，实现具体的效果。
但是我使用工具，要不就是要注册下账号，才能进行裁剪；要不就是裁剪出来的图片，有黑色的背景。
最后我决定推翻上面的想法，想着背景渐变能不能和背景图一块使用。
一开始就知道 linear-gradient 的使用，是要使用到 background-image，但是图片也是使用 background-image 的。
如果使用 background-image 的话，会出现覆盖的情况，在查看网上资料和文档之后，使用 background 简写属性
.activity-item {
background: url('./imgs/booking-2.png') 100% 100% no-repeat,
linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.85) 100%);
}
实现的效果，就是前言的效果图那样。
写到最后
如果要达到背景渐变和背景图片同时存在的话，只需要做下面的设置：
.activity-item {
background: url('./imgs/booking-2.png') 100% 100% no-repeat,
linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.85) 100%);
}
逗号前面设置图片，后面设置需要的渐变色即可。
完。
