#yyds干货盘点#——css模拟图片透明背景效果

一、背景

​有时候我们需要处理一些图片预览的情况，然后在一个图片列表中展示图片缩略图会遇到，如果图片是png格式的，背景透明但是图案是白色的，看不清怎么办呢？​

二、实现

​这里主要利用了 ​

​css​

​​ 中的 ​background-image​、​background-position​ 、​background-size​属性实现的。​

1.background-image

background-image​ 属性可以设置一个或者多个背景图，由逗号分隔的多个值来指定多个背景图像。​

2.linear-gradient

​我们通过 ​linear-gradient ​来创建一个表示两种或多种颜色线性渐变的图片：​

/*以上两个属性demo*/
.bg-img{
    background-image:
      linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
      url('https://mdn.mozillademos.org/files/7693/catfront.png');
}      

​引用mdn中的说明示例，让我们对 ​

​linear-gradient​

​​属性有个概念，具体参考mdn文档 ​linear-gradient ​：​

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);      

三、实现效果图

​在前面熟悉了 ​background-image​ 和 ​linear-gradient ​属性的基础上呢，我们就可以进行实现了。​

1. 首先我们要利用 ​

​linear-gradient​

​ 创建两个图片

/*第一层：从45度开始灰色渐变到25%的位置，透明从0开始，到75%的位置，灰色从0开始到结束，这样有清晰的间隔线*/
linear-gradient(45deg, #eee 25%, transparent 0, transparent 75%, #eee 0, #eee)      

/*第二层 这里为了举例看的清楚用的红色red，实际改成白色#fff*/
linear-gradient(45deg, #eee 25%, red 0, red 75%, #eee 0, #eee)      

2. 接下来叠加在一起看效果：

background-image: 
    linear-gradient(45deg, #eee 25%, transparent 0, transparent 75%, #eee 0, #eee),
    linear-gradient(45deg, #eee 25%, red 0, red 75%, #eee 0, #eee);      

3. 设置 ​

​background-size​

​

​把上图的图片设置成 ​

​20px * 20px​

​​ 的大小，铺满整个区域​

background-size: 20px 20px;      

4. 设置background-position

​为每一个图片设置初始位置，因为每个图片大小是20px，位置偏移是图片大小的一半，是10px​

background-position: 0 0, 10px 10px;      

​注意：​

​​这里会发现background-position用逗号隔开了两个值，这里其实代表的是对于上面我们设置的 background-image 的两张图分别对应的初始位置。​​

​​如下图所看到的：​​

• 把第一层透明的区域从透明改成 ​

  ​rgba(0,0,0,.5)​

  ​​，这样可以看到两图叠加的效果。第一层图片位移 ​

  ​background-position: 0 0​

  ​。
• 第二层红色的图位移 ​

  ​background-position: 5px 5px;​

  ​ 叠加以后的效果。

5.红色替换为白色，最终效果：

background-size: 20px 20px;
background-position: 0 0, 10px 10px;
background-image: 
    linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),
    linear-gradient(45deg, #eee 25%, #fff 0, #fff 75%, #eee 0, #eee);