html里面颜色用百分比,CSS设置背景颜色表行的宽度只是一个百分比(CSS to set the background co...-优快云博客

本文介绍如何使用线性渐变背景，并提供了JavaScript实现方法。针对不同浏览器的兼容性问题进行了详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你可以使用线性渐变。

如果百分比为40％：

table{

background: -webkit-gradient(linear, left top, right top, color-stop(40%,#F00), color-stop(40%,#00F));

background: -moz-linear-gradient(left center, #F00 40%, #00F 40%);

background: -o-linear-gradient(left, #F00 40%, #00F 40%);

background: linear-gradient(to right, #F00 40%, #00F 40%);

}

演示

因此，在JavaScript中，

var percentage=40,

col1="#F00",

col2="#00F";

var t=document.getElementById('table');

t.style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";

t.style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";

t.style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";

t.style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";

演示

如果要将此应用到每一行是不同的：

var col1="#F00",

col2="#00F";

var els=document.getElementById('table').getElementsByTagName('tr');

for (var i=0; i

var percentage = Number(els[i].getElementsByTagName('td')[1].firstChild.nodeValue);

els[i].style.background = "-webkit-gradient(linear, left top,right top, color-stop("+percentage+"%,"+col1+"), color-stop("+percentage+"%,"+col2+"))";

els[i].style.background = "-moz-linear-gradient(left center,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;

els[i].style.background = "-o-linear-gradient(left,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)";

els[i].style.background = "linear-gradient(to right,"+col1+" "+percentage+"%, "+col2+" "+percentage+"%)" ;

}

问题是，背景设定在tr上的Firefox和Opera效果很好，但在Chrome梯度应用到每个细胞。

此问题可以固定添加该代码(参见https://stackoverflow.com/a/10515894 )：

#table td {display: inline-block;}

演示