更改字符/字体内部的颜色答案

【问题标题】：Changing the colour inside characters/Font更改字符/字体内部的颜色
【发布时间】：2013-10-26 22:15:12
【问题描述】：

首先，我需要说我不是网络开发人员，但我通过学习尽可能多的教程以及从 Google 搜索中一起破解代码，设法创建了一个 HTML5 和 CSS3 网站。

我想在我的网站上显示环境信息：温度、湿度、气压等

我想知道以下是否可行，是否有人可以为我指出正确的方向？

我想做的是显示 Temp 的值。并在与温度相关的数字内显示颜色。

例如：

如果温度低于10'C，则数字内的颜色为深蓝色

如果温度在 10'C - 20'C 之间，则数字内的颜色为 深蓝色 在底部和在数字的顶部处渐变为浅蓝色

如果温度在 20'C - 30'C 之间，则数字内的颜色在底部为 浅蓝色，并且在数字的顶部处渐变为橙色

如果温度在 30'C - 40'C 之间，则数字内的颜色在底部处为橙色并逐渐消失到红色在顶部的数字

如果温度高于40'C，则数字内的颜色为红色

我希望它有意义

提前致谢

格雷格

【问题讨论】：

显示您的 html 代码以获得更好的建议...
那么，您的问题是如何获取天气小部件，还是如何为已有的天气设置样式？如果它是您已经拥有的，请向我们展示您已经拥有的代码。
你有什么尝试吗..
我什么都没试过。我一直在网上搜索一个例子，或者一个我可以开始的基地。我什至不知道这是否可能。
你的温度值（如 10'C - 20'C）来自数据库或其只是文本？？

标签： javascript php html css web

【解决方案1】：

您可以使用一些具有不同背景颜色的类，例如。

在css中

.cssclassname1{
 background-color:blue;
}

.cssclassname2{
 background-color:blue;
}

在html中

<div class="cssclassname1">below 10</div>
<div class="cssclassname2">above 10</div>

希望这会有所帮助...

【讨论】：

【解决方案2】：

我已经尝试了一些东西，但我无法定义你的所有条件

demo

HTML

<p>If the Temp is below 10C, then colour inside the digits is dark blue.<br>
If the Temp is above 40C then the colour inside the digits is red</p>

$.fn.wrapInTag = function(opts) {

    var o = $.extend({
        words: [],
        tag: '<strong>'
    }, opts);

    return this.each(function() {
        var html = $(this).html();
        for (var i = 0, len = o.words.length; i < len; i++) {
            var re = new RegExp(o.words[i], "gi");
            html = html.replace(re, o.tag + '$&' + o.tag.replace('<', '</'));
        }
        $(this).html(html);
    });

};

$('p').wrapInTag({
    words: ['10C', 'dark blue'],
    tag: '<span>'
});

$('p').wrapInTag({
    words: ['40C', 'red'],
    tag: '<span1>'
});

【讨论】：

【解决方案3】：

使用 background-clip: text 可以得到很好的效果。

不过，这仅受 webkit 和 Mozilla 支持。

我已经为 Chrome 准备了一个演示。 CSS是

.text {
  font-size: 100px;
  background-image: linear-gradient(0deg, red, orange, yellow, lightblue, blue);
  background-size: 100% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: colors 10s infinite linear;
  -webkit-text-stroke: 1px black;
}

@-webkit-keyframes colors {
    0% {background-position-y: 300%;}
    100% {background-position-y: 0%;}
}

在这个演示中，背景被文本裁剪，所以它只显示在数字内部。为了让它显示，我们还需要使文本透明。（为了让它更好一点，我们在字体周围设置了一个笔触。

然后，我们使用您想要的颜色创建一个渐变背景，并且只是为了好玩，我们对其进行动画处理。

在您的代码中，背景位置将根据温度设置。

请注意，使用该系统，您可以连续进行。（即每个温度的颜色略有不同

demo

【讨论】：

【解决方案4】：

Js Fiddle 示例 here （如果您的浏览器不支持 webkit，请尝试使用this example。）

控制文本外观的最简单方法可能是使用 css 定义不同的样式（或您所说的颜色），然后使用 javascript 围绕温度值文本设置 span 标签的类。

一些示例 HTML

<html>

<head>
    <script src="[path to your .js file]"></script>
    <link rel="stylesheet" href="[path to your .css file]" />
</head>

<body onload="initialize();">
    <p>The temperature today is <span id="tempVal"></span></p>
</body>

</html>

您的 javascript 文件：

var curTemp; // this will contain the current temperature
var curClassName; // the name of the class for that temperature (reflects css code below)
var valueContainer;

function initialize()
{
    valueContainer = document.getElementById("tempVal");
}

//... calculate or set the current temperature value here ...

if (curTemp < 10)
    curClassName = "freezing";
else if (curTemp >= 10 && curTemp < 20)
    curClassName = "cold";
else if (curTemp >= 20 && curTemp < 30)
    curClassName = "warm";
else if (curTemp >= 30 && curTemp <= 40)
    curClassName = "hot";
else if (curTemp > 40)
    curClassName = "scorching";

valueContainer.innerHTML = curTemp + "C";
valueContainer.setAttribute("class", curClassName);

这只是留下您的 CSS 文件。现在，在不使用画布元素的情况下实现这种渐变效果的唯一方法是使用一些 webkit 属性。这些都不是普遍支持的，所以为了最大的便携性，我会简单地使用不同的纯色而不是渐变，但这里是 webkit 示例。

#tempVal 
{
    font-weight: bold;
}
.freezing
{
    color: blue;
}
.cold
{
    background: -webkit-linear-gradient(top, lightblue, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.warm
{
    background: -webkit-linear-gradient(top, orange, lightblue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hot
{
    background: -webkit-linear-gradient(top, red, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.scorching
{
    color: red;
}

查看示例here 如果您的数字没有出现渐变色，那是因为您的浏览器不支持 webkit 功能。

【讨论】：