如何更改 Jumbotron 内文本的渐变颜色？

Question

我一直在到处寻找正确的代码来仅更改 Jumbotron 中的文本（标题）。

这是我得到的：

    <div class="jumbotron">
        <div class="container text-center">
            <h1 class="method2">Title here</h1>
            <p>Sub-heading</p>
        </div>

我想更改此标题的渐变色。我在某处看到了一个 css 代码，它是这样的：

h1.method2{
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));
 }

我面临的问题是我的 "Title here" 位的底部似乎被切断了一点，所以我尝试了 re-adjusting 底部边距，但它也没有那样工作.所做的只是将 sub-heading 推到更下方。

我也不确定这种渐变模式究竟是如何工作的。 bootstrap.

的字体渐变着色似乎没有太多解释

有人可以解释我是否做错了什么以及它是如何工作的吗？

谢谢。

Answer 1

如果您下载了 css 并且在您的文件夹中，请找到行

.jumbotron .h1

只需粘贴您发布的代码即可

-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1)); -webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));

就是这样，如果您从他们的网站导入 css，您将不得不覆盖它

如何更改 Jumbotron 内文本的渐变颜色？

How do I change gradient color of text inside the Jumbotron?

html

css

linear-gradients

twitter-bootstrap-3