使用css让图片透明渐变

2024-01-31 13:40| 来源: 网络整理| 查看: 265

1. 前言

今天接到一个这样的需求，将一张图片作为一个背景，然后四周透明渐变，效果如下：很简单是吧，只要这个背景图片是png的，然后图片四周半透明就ok了，然而给到我手里的是jpg格式的，怎么办？让UI小姐姐在帮你做一个呗，又多了一个搭讪的好机会，额... 我社恐。。。直接css手冲吧！！！

2. css 手冲第一波

使用背景渐变，覆盖到图片上面，就可以实现一个伪透明渐变的效果了，上代码：

Document 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; }

效果同上面截图一样，这里就不放截图了，但是这里是有缺陷的，如果这个大背景图是其他颜色，那么你也需要跟着改，如果是背景图直接凉了。

换一种背景色

色彩多变的背景图

3. css 手冲第二波

上面的方式被我pass后，第二波里面就想到了css的filter属性，可以使用alpha通道来实现透明渐变效果，上代码：

Document 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) }

空学一身知识，结果很令我失望，这filter属性不用也罢，反正这个属性目前风评也不是很好，兼容性差，消耗性能，虽然网上也有很多说这个属性很强大，确实很强大，但是不建议使用在生产环境中，自己玩玩还是ok的，所以这里就不介绍详细信息了，感兴趣可以自己查一下资料去玩玩。

4. css 手冲第三波

这一波咱使用mask属性，mask这个单词很熟悉了吧，写遮罩的时候总喜欢用这个单词，所以see mask，我就先上代码了：

Document 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%); }

效果很完美，唯一的缺点就是需要带上-webkit-前缀，因为是实验性的功能，又解决一个问题，顺带着还学习了一个css属性，外加几个解决问题的方案，完美撒花。

乐意去学习一下mask属性的可以去MDN上面看看哟 ---> developer.mozilla.org/zh-CN/docs/…

【本文地址】

公司简介

联系我们