当图片背景是透明的时候，我们再屏幕上看到的都会是白色背景，根本无法区分是否为透明背景；而且如果图片中元素也是白色时，那么我们啥东西都无法看到。那么有什么方法可以区分透明背景？比较简单的方法是图片的底下再叠一张灰色马赛克图片，这样当图片背景是透明时，就能看到底下的透明背景，那么CSS是否能实现这样的效果呢？
<style>
.img {
width: 400px;
height: 400px;
border: 1px solid red;
}
.img-transparent-bg {
background-image: linear-gradient(45deg, #00000040, #00000040),
linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),
linear-gradient(45deg, #eee 25%, #fff 0, #fff 75%, #eee 0, #eee);
background-size: 12px 12px;
background-position: 0 0, 0 0, 6px 6px;
}
</style>
<body>
<img src="./company_icon.svg" alt="" class="img" />
<img src="./company_icon.svg" alt="" class="img img-transparent-bg"/>
</body>
上面代码利用渐变色直接实现灰色马赛克背景。 灰色马赛克背景是三张渐变色背景的叠加：
-
最底层
linear-gradient(45deg, #00000040, #00000040)，为纯灰色背景 -
次底层为
linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee)上面红框内150px的渐变背景，repeat之后铺满图片，它是45度渐变，即从左下角至右上角渐变，0-25%为#eee,接下来不需要过渡，25%-75%为透明色，75%-100%为灰色。
-
最顶层则为
linear-gradient(45deg, #eee 25%, #fff 0, #fff 75%, #eee 0, #eee);与次底图基本是一样的，只不过把透明色变为白色。如果仅仅是这样那么三张叠起来也不会是马赛克的，但是只要我们把最顶层的图片的background-position向上和向左移动一半，那么就能拼成马赛克图片。
