更改字符/字体内的颜色

Question

Firstly, I need to say I am not a web developer, but I have managed to create a HTML5 and CSS3 web site by learning from as many tutorials as possible, also hacking code together from Google searches. 首先，我必须说我不是Web开发人员，但是我设法通过学习尽可能多的教程来创建HTML5和CSS3网站，并且还从Google搜索中窃取了代码。

On my web site I would like to display environmental information: Temperature, Humidity, Air Pressure, etc. 我想在我的网站上显示环境信息： 温度，湿度，气压等。

I would like to know if the following is possible and if someone can point me in the right direction? 我想知道是否可以进行以下操作，以及是否有人可以指出正确的方向？

What I would like to do is display the value of the Temp. 我要显示的是Temp的值。 and have the colour inside the digits related to the Temp. 并在与温度相关的数字内显示颜色。

So for example: 因此，例如：

If the Temp is below 10'C , then colour inside the digits is dark blue 如果温度低于10'C ，则数字内部的颜色为深蓝色

If the Temp is between 10'C - 20'C , then the colour inside the digits is dark blue at the bottom and fades to light blue at the top of the digits 如果温度在10'C-20'C之间，则数字内部的颜色在底部为深蓝色 ，而在数字顶部逐渐变为浅蓝色

If the Temp is between 20'C - 30'C , then the colour inside the digits is light blue at the bottom and fades to orange at the top of the digits 如果温度介于20'C-30'C之间，则数字内部的颜色在底部为浅蓝色 ，在数字顶部逐渐变为橙色

If the Temp is between 30'C - 40'C , then the colour inside the digits is orange at the bottom and fades to red at the top of the digits 如果温度介于30'C-40'C之间，则数字内部的颜色在底部为橙色，而在数字顶部则逐渐变为红色

If the Temp is above 40'C then the colour inside the digits is red 如果温度高于40'C，则数字内部的颜色为红色

I hope it makes sense 我希望这是有道理的

Thank-you in advance 先感谢您

Gregg 格雷格

Answer 1

You can use some classes having different background colors like. 您可以使用一些具有不同背景颜色的类。

in css 在CSS

.cssclassname1{
 background-color:blue;
}

.cssclassname2{
 background-color:blue;
}

in html 在HTML

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

Hope this helps... 希望这可以帮助...

Answer 2

i have tried something but i cant define all ur condiotions 我尝试了一些东西，但我无法定义所有条件

demo 演示

HTML 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>

JS JS

$.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>'
});

Answer 3

You can get a good effect using background-clip: text. 使用background-clip：文本可以达到良好的效果。

This is only supported by webkit and mozilla, though. 不过，只有Webkit和mozilla支持此功能。

I have prepared a demo for Chrome. 我已经为Chrome准备了一个演示。 The CSS is 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%;}
}

In this demo, the background is clipped by the text, so that it will show only inside the numbers. 在此演示中，背景被文本剪裁，因此它将仅显示在数字内部。 To let it show we need also to make the text transparent. 为了显示它，我们还需要使文本透明。 (and to make it a little nicer, we set a stroke around the font. （为了使它更好一点，我们在字体周围设置了一个笔触。

Then, we create a gradient background with the colors that you want, and just for fun we animate it. 然后，我们用所需的颜色创建渐变背景，并且仅出于娱乐目的，我们对其进行动画处理。

In your code, the background-position would be set according to the temperature. 在您的代码中，背景位置将根据温度进行设置。

Notice that with that system, you can do it continous. 注意，使用该系统，您可以连续进行。 (that is, a slightly different color for every temperature （即每种温度下的颜色略有不同

demo 演示

Answer 4

Js Fiddle Example here (If your browser lacks webkit support, try this example instead.) 这里的 Js Fiddle示例（如果您的浏览器缺少Webkit支持，请尝试以下示例。）

Probably the simplest way to control what the text looks like is to use css to define different styles (or colors as you've said) and then use javascript to set the class of a span tag around the temperature value text. 控制文本外观的最简单方法可能是使用css定义不同的样式（或您所说的颜色），然后使用javascript设置温度值文本周围的span标签的类。

Some Sample HTML 一些样本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>

Your javascript file: 您的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);

This just leaves your CSS file. 这只剩下您的CSS文件。 Now currently, the only way to achieve this gradient effect without using a canvas element is to use some webkit properties. 目前，不使用canvas元素来实现此渐变效果的唯一方法是使用一些webkit属性。 These are not universally supported, so for maximum portability, I would simply use different solid colors rather than gradients, but here's the webkit example. 不普遍支持这些功能，因此为了获得最大的可移植性，我将简单地使用不同的纯色而不是渐变，但这是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;
}

Check out the example here If your numbers aren't coming up with a gradient color, it's because your browser doesn't support the webkit features. 在此处查看示例如果您的数字没有用渐变色显示，那是因为您的浏览器不支持webkit功能。

更改字符/字体内的颜色

问题描述

4 个解决方案

解决方案1
0 2013-10-18 06:59:41

解决方案2
0

解决方案3
0 2013-10-18 16:58:27

demo 演示

解决方案4
0 2013-10-18 18:34:46

更改字符/字体内的颜色

问题描述

4 个解决方案

解决方案1 0 2013-10-18 06:59:41

解决方案2 0

解决方案3 0 2013-10-18 16:58:27

demo 演示

解决方案4 0 2013-10-18 18:34:46

解决方案1
0 2013-10-18 06:59:41

解决方案2
0

解决方案3
0 2013-10-18 16:58:27

解决方案4
0 2013-10-18 18:34:46