登录
首页 >  文章 >  前端

如何使用 CSS 实现从上到下渐变浅色，从左到右渐变彩色的背景效果？

时间：2024-11-11 16:28:00 390浏览 收藏

哈喽！今天心血来潮给大家带来了《如何使用 CSS 实现从上到下渐变浅色，从左到右渐变彩色的背景效果？ 》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

如何使用 CSS 实现从上到下渐变浅色，从左到右渐变彩色的背景效果？

从上至下渐变浅色，实现渐层交织效果

在 CSS 样式中，实现从上到下逐渐变浅的渐变色，可以运用 mask-image 属性。

实现步骤：

在 <head> 标签内加入以下代码，创建一个从上到下的黑色到透明的渐变遮罩：

html, body {
    width: 100%;
    height: 100%;
}

html {
    background-color: #ffffff;
}

body {
    -webkit-mask-image: linear-gradient(to bottom, #000000, transparent);
}

随后，在 <body> 标签内添加以下代码，创建从左到右的彩色渐变背景：

background-image: linear-gradient(to right, rgb(39, 121, 245), rgb(81, 221, 240), rgb(118, 216, 118));
background-repeat: no-repeat;

效果演示：

完成以上操作后，即可获得一个从上到下渐变浅色，从左到右渐变彩色的背景效果。

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        html {
            background-color: #ffffff;
        }

        body {
            -webkit-mask-image: linear-gradient(to bottom, #000000, transparent);
            background-image: linear-gradient(to right, rgb(39, 121, 245), rgb(81, 221, 240), rgb(118, 216, 118));
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
</body>
</html>

以上就是《如何使用 CSS 实现从上到下渐变浅色，从左到右渐变彩色的背景效果？ 》的详细内容，更多关于的资料请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>