【问题标题】:Text with multiple color gradient in CSSCSS中具有多种颜色渐变的文本
【发布时间】:2016-10-10 02:03:34
【问题描述】:

如何使用 CSS 创建如下图所示的多色文本?

文本使用了某种随机不同的颜色,我想做一些看起来相同的东西。这是来自一张图片,所以我不能只在页面的源代码中寻找答案。

感谢您的帮助! :)

【问题讨论】:

标签: html css text colors gradient


【解决方案1】:

.gradient2:before {
    background: rgba(0, 0, 0, 0) radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670) repeat scroll 0 0;
    content: "";
    display: block;
    mix-blend-mode: screen;
}
.gradient2:before, .gradient2:after {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}
.gradient2:after {
    background: #04161f none repeat scroll 0 0;
    color: white;
    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.";
    mix-blend-mode: multiply;
}

.gradient2 {
    background: white none repeat scroll 0 0;
    color: black;
    margin: 1em auto;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 0 #04161f, 1px -1px 0 #04161f, -1px -1px 0 #04161f, -1px 1px 0 #04161f;
    width: 10em;
}
<body>
<p class="gradient2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, aut.</p>
</body>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-09-28
    • 2017-06-27
    • 1970-01-01
    • 2018-02-03
    • 2014-01-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多