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上面看看哟 ---> developer.mozilla.org/zh-CN/docs/…

使用css让图片透明渐变

1. 前言

2. css 手冲第一波

3. css 手冲第二波

4. css 手冲第三波