这篇文章给大家分享的是有关CSS实现透明渐变特效的案例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知
这篇文章给大家分享的是有关CSS实现透明渐变特效的案例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知：
这张图其实可以分成两部分，右边控制图形和渐变，左边就是一张纯色背景，和渐变无关
透明transparent也是一种颜色，也是渐变可以设置的
布局
<body> <div class="bg-gradient"> <div class="pic"></div> </div></body>css样式
<style> .bg-gradient { margin: 0 auto; background: rgb(244, 195, 77); position: relative; width: 600px; height: 350px; } .bg-gradient .pic{ background-image: linear-gradient(to right, rgb(244, 195, 77), transparent), url("bg.jpg"); background-position: center; background-blend-mode: nORMal; position: absolute; height: 100%; width: 250px; right: 0; }</style>最后的效果如下
感谢各位的阅读！关于“css实现透明渐变特效的案例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: css实现透明渐变特效的案例
本文链接: https://lsjlt.com/news/251831.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0