CSS如何实现透明渐变的效果，方法是什么？

发布时间：2023-08-10 14:12:09 所属栏目：语言来源：

导读：这篇文章给大家分享的是CSS透明渐变的效果实现。小编觉得挺有趣的，对大家学习CSS的使用有一定的帮助，因此分享给大家做个参考，文中示例代码介绍的很详细，感兴趣的朋友接下来一起跟随小编看看吧。

其实可以

这篇文章给大家分享的是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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!