1. 前言
今天接到一个这样的需求，将一张图片作为一个背景，然后四周透明渐变，效果如下：
很简单是吧，只要这个背景图片是png的，然后图片四周半透明就ok了，然而给到我手里的是jpg格式的，怎么办？让UI小姐姐在帮你做一个呗，又多了一个搭讪的好机会，额... 我社恐。。。直接css手冲吧！！！
2. css 手冲第一波
使用背景渐变，覆盖到图片上面，就可以实现一个伪透明渐变的效果了，上代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
background: aquamarine;
}
.mask {
margin: auto;
position: relative;
}
.mask::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: radial-gradient(transparent 50%, aquamarine 100%);
}
.mask img {
width: 500px;
position: relative;
}
</style>
</head>
<body>
<div class="mask">
<img src="1.jpg">
</div>
</body>
</html>
效果同上面截图一样，这里就不放截图了，但是这里是有缺陷的，如果这个大背景图是其他颜色，那么你也需要跟着改，如果是背景图直接凉了。
换一种背景色
色彩多变的背景图
3. css 手冲第二波
上面的方式被我pass后，第二波里面就想到了css的filter属性，可以使用alpha通道来实现透明渐变效果，上代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
background: radial-gradient(#00ff00, #0000cc, #999977, #EEEEEE, #ff5500, #dd4444, #00ff00, #0000cc, #999977, #EEEEEE, #ff5500, #dd4444);
}
img {
margin: auto;
position: relative;
width: 500px;
filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)
}
</style>
</head>
<body>
<img src="1.jpg">
</body>
</html>
空学一身知识，结果很令我失望，这filter属性不用也罢，反正这个属性目前风评也不是很好，兼容性差，消耗性能，虽然网上也有很多说这个属性很强大，确实很强大，但是不建议使用在生产环境中，自己玩玩还是ok的，所以这里就不介绍详细信息了，感兴趣可以自己查一下资料去玩玩。
4. css 手冲第三波
这一波咱使用mask属性，mask这个单词很熟悉了吧，写遮罩的时候总喜欢用这个单词，所以see mask，我就先上代码了：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: flex;
background: radial-gradient(#00ff00, #0000cc, #999977, #EEEEEE, #ff5500, #dd4444, #00ff00, #0000cc, #999977, #EEEEEE, #ff5500, #dd4444);
}
img {
margin: auto;
position: relative;
width: 500px;
-webkit-mask: radial-gradient(black 50%, transparent 100%);
}
</style>
</head>
<body>
<img src="1.jpg">
</body>
</html>
效果很完美，唯一的缺点就是需要带上-webkit-前缀，因为是实验性的功能，又解决一个问题，顺带着还学习了一个css属性，外加几个解决问题的方案，完美撒花。
乐意去学习一下mask属性的可以去MDN上面看看哟 ---> https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask
