css实现透明渐变特效的示例代码

知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知：

这张图其实可以分成两部分，右边控制图形和渐变，左边就是一张纯色背景，和渐变无关

透明transparent也是一种颜色，也是渐变可以设置的

下面我把自己的代码贴出来，仅供参考

布局

<body>
    <div class="bg-gra die nt">
        <div class="pic"></div> 
    </div>
</body>

css样式

<style>
        .bg-gradient {
            m arg in: 0 auto;
            background: rgb(244, 195, 77);
            pos IT ion: relative;
            width: 600px;
            h ei ght: 350px;
        }

        .bg-gradient .pic{
            background -i mage: 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>

最后的效果如下

以上就是我的代码，谢谢观看。

ps：如果你想要在其中写点文字后出了问题，我不觉得这是个问题好吧，那是你的问题。听我的，你要自主解决。（明言明语）

总结

以上是为你收集整理的 css实现透明渐变特效的示例代码全部内容，希望文章能够帮你解决 css实现透明渐变特效的示例代码所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css实现透明渐变特效的示例代码的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did201020

更新时间：2023-04-27 阅读：23次