Question

我有一个网站使用“标记”作为颜色编码的遗传指南。它们是通过配置页面中的php数组设置的，并且背景颜色有内联样式。我想做的是覆盖其中一个标记（darkorange）以显示2色调的颜色（黄色/白色），而不是纯橙色。（对于黄绿色也需要这样做-蓝色/白色。）

对于CSS，我有此功能，但不确定如何将其仅应用于深橙色标记（通过样式表或内联），当前无效：

span.m_darkorange
{
background-color:yellow;
  background: linear-gradient(to right, yellow 50%, white 0);
}

配置页面上的代码：

 $aMarkColors = array("crimson", "darkorange", "gold", "chartreuse", "aqua", "royalblue", "blueviolet", "deeppink", "darkblue", "darkgreen", "darkcyan", "chocolate", "darkgoldenrod", "greenyellow", "orchid", "seagreen");

以及调用标记的代码：

function GetMarksDiv($nMarks, $sClass)
{
global $bIgnoreRedMarks, $aMarkColors, $aMarkColorTooltips;
$sText = "";
if ($bIgnoreRedMarks)
    $nMarks = 0xFE & $nMarks;
if ($nMarks != 0)
{        
    $sText = $sText . "<div class='$sClass'>\n";
    $nMask = 1;
    $nIndex = 0;
    foreach ($aMarkColors as $sColor)
    {
        $x = $nMask & $nMarks;
        $sTitle = "";
        if ($aMarkColorTooltips && $nIndex < count($aMarkColorTooltips))
            $sTitle = "title='$aMarkColorTooltips[$nIndex]'";
        if ($x)
            $sText = $sText .  "<span class='mark' style='background-color:$sColor' $sTitle>&nbsp;</span>\n";
        $nMask = $nMask << 1;
        $nIndex++;
    }
    $sText = $sText .  "</div>\n";
}
return $sText;
}

任何人和所有帮助将不胜感激！这让我发疯，我似乎无法解决。

Answer 1

好吧，您可以将 $ sColor 值添加到跨度的类中：

<span class='mark $sColor' style='background-color:$sColor' $sTitle> </span>\n

（您的跨度将有两个类，其中一个总是标记，另一个具有与颜色相同的名称）

然后您可以使用CSS中的特定类覆盖选定范围的背景：

span.mark.darkorange{
    background: linear-gradient(to right, yellow, white);
}

还：您是否使用浏览器的控制台（检查元素）检查了到底什么不起作用？他们给出了非常准确的答案。我问是因为您的CSS无效-控制台肯定会告诉您的。也许还有其他错误，例如错别字...

跨度类“标记”中的背景颜色覆盖

1 个答案: