Question

我正在尝试制作具有多种颜色的标题，我已经找到了一种方法，但是我对此不太满意。我希望它位于属性或h1元素上，并带有文本和多种颜色

这就是我一直在使用的

body {
  background-color: #1A1A1D;
}

.header {
  text-align: center;
  font-size: 48px;
}

#super {
  color: #FF6447;
  text-shadow: 2px 2px #000000;
}

#bone {
  color: #FFB951;
  text-shadow: 2px 2px #000000;
}

#craft {
  color: #FFF547;
  text-shadow: 2px 2px #000000;
}

<div class="header">
  <a id="super">SUPER</a><a id="bone">BONE</a><a id="craft">CRAFT</a>
</div>

Answer 1

不太清楚要做什么，但是如果您希望字体颜色基于属性，则可以使用README.md。使用此方法而不是使用id的好处是，可以根据需要轻松地使用Javascript设置/获取值或元素。

此外，您应该使用data标签而不是span。

body {
  background-color: #1A1A1D;
}

.header {
  text-align: center;
  font-size: 48px;
}

span[data-color] {
  text-shadow: 2px 2px #000000;
}

span[data-color="super"] {
  color: #FF6447;
}

span[data-color="bone"] {
  color: #FFB951;
}

span[data-color="craft"] {
  color: #FFF547;
}

Answer 2

尝试一下：

#someID {
  text-shadow: 2px 2px #000000;
}

.super {
  color: #FF6447;
}

.bone {
  color: #FFB951;
}

.craft {
  color: #FFF547;
}

<div class="header">
  <a id="someID"><span class="super">SUPER</span><span class="bone">BONE</span><span class="craft">CRAFT</span></a>
</div>

在这种情况下，您只有一个a标签。

一行多彩色文本

2 个答案: