如何在 tumblr 上将 h2 样式文本设置为两种颜色？答案

【问题标题】：How can I make h2 style text be two colors on tumblr?如何在 tumblr 上将 h2 样式文本设置为两种颜色？
【发布时间】：2020-09-13 08:45:02
【问题描述】：

我正在我的 tumblr 博客上写作，我正在尝试将这个 h2 样式的文本设置为两种颜色。这就是我所拥有的：

<h2 style="padding: 20px 20px 30px; margin-top: 2px; text-align: center; position: relative;">Harley Quinn</h2>

我希望“Harley”是红色的，“Quinn”是黑色的。我不知道该怎么做。

我已经尝试过了，它在我仍在编辑页面时有效，但是一旦我单击保存并离开，[span style] 部分就会消失。

<h2 style="padding: 20px 20px 30px; margin-top: 2px; text-align: center; position: relative;"><span style="color:#9C0000">Harley</span> Quinn</h2>

谢谢！

【问题讨论】：

我建议您在保存更改后尝试检查元素。看看developers.google.com/web/tools/chrome-devtools/inspect-styles
您能提供一些网址吗？谢谢
不要为 h2 设置样式，在 h2 中放置两个 span 并单独设置它们

标签： html colors tumblr

【解决方案1】：

试试这个，如果不起作用，请提供你的 URL 地址，也许其他地方有问题:)

<h2 style="padding: 20px 20px 30px; margin-top: 2px; text-align: center; position: 
relative;"><span style="color:#9C0000!important">Harley</span> <span 
style="color:#000000!important">Quinn</span></h2>

【讨论】：

【解决方案2】：

我创建了两种工作方式相似的方法，但为了将它们抽象化，我将内联样式分离为简单的类名。但是我不建议使用这些类名，这纯粹是为了说明目的。

HTML

<h2 class="red">Harley <span class="black">Quin</span></h2>

<h2><span class="red">Harley</span> Quin</h2>

CSS（两者都适用）

.black {
    color: #000;
}

.red {
    color: #f00;
}

由于黑色是默认字体颜色，因此第二种方法使用较少的标记。

JSFIDDLE 示例here

【讨论】：