Question

CSS中是否有一种方法可以采用CSS类定义的活动颜色，并使颜色变暗或变亮以便在另一个CSS类中使用？

发展情景：
我们有一个使用CSS样式的对话框，它将颜色定义为灰色阴影。在dailog中，我们有按钮使用2种不同的CSS样式来模拟按钮向上和按钮按下状态。

是否可以让按钮的CSS样式使用对话框颜色，但使按钮外观变暗或变亮。按钮面应该比主对话框颜色更亮，并且使用更亮和更暗的颜色作为边框，这样可以显示3D按钮框。

目标：
如果我们更改对话框的颜色，按钮也会更改，而不必对用于呈现按钮的向上和向下状态的2个CSS样式进行任何代码更改。

我猜测有一种方法可以在JavaScript中执行此操作，但CSS中是否有一种方法可以执行此操作？

Answer 1

您可以使用白色或黑色背景，其中opacity适合您想要减轻的数量。不透明度使用起来有点挑战（相对于其他更常见的CSS属性），因为它需要特定于浏览器的黑客攻击。根据{{3}}，以下（hacky）CSS将在浏览器中运行以支持50％的不透明度：

.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; }

BTW，我回答this blog post，它包含一些jQuery代码示例，可用于以浏览器中立的方式应用不透明度。如果上面的CSS让你傻逼，你可以使用它。 :-)请注意，我在上面添加了“zoom：1”以确保元素具有“布局”，这是应用不透明度的IE特定先决条件 - 此问题也在上面链接的此线程中描述。

您还可以使用白色但具有您喜欢的透明度值的PNG图像。这需要在IE6中使用通常的PNG解决方案。

这是一个代码示例，说明了可能的（以及一些限制）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
        .button { background-color:green; height:30px; width:100px; border: solid 1px red; color:#FFF; margin:20px; text-align:center;  }
        .buttonText { height:30px; width:100px;  color:#FFF; margin:20px; text-align:center;  }
        .show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; } 
        .lighter { background-color:#CCCCCC; height:100%; width:100%; }
        .darker { background-color:#000000; height:100%; width:100%;}
        .whitetext {color:#fff; height:100%; width:100%; padding-top:6px;}
        .moveText {margin-top:-52px; color:#fff; padding-top:6px; z-index: 10; }
    </style>
</head>
<body>
 <div class="button"></div>
 <div class="buttonText moveText">Regular button</div>
 <div class="button"><div class="show-50 lighter"></div></div>
 <div class="buttonText moveText">Lighter button</div>
 <div class="button"><div class="show-50 darker"></div></div>
 <div class="buttonText moveText">Darker button</div>
</body>
</html>

在IE8上，文字看起来很完美（又称白色）。在FF和Safari上，遗憾的是文本变暗了。上面我把文本放到不同的DIV中的黑客欺骗IE在不同颜色的背景上显示白色文本，但同样的技巧在FF和Safari上不起作用。我怀疑你可以发挥创意并找到改进方法，以便文本在所有浏览器中保持相同的颜色。一个真正的实现可能也想要使用绝对定位而不是我的负面利润率。

Answer 2

您是否考虑过使用LESS？它支持许多其他变量：

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

LESS确实需要在部署期间进行预处理 - 但是如果您需要在运行时执行上述操作，这可能不是一个选项（但是，无论如何，JavaScript将是唯一可行的选项）。

Answer 3

您还可以使用PHP创建动态css文件，并具有自动计算颜色亮度的功能。您可以通过更改1字段来设置更改在许多不同位置定义的颜色的设置。这是一个例子：

<?php
//adjust brightness by taking a value between -255 and 255
function brightness($color, $brightness){
   if(!$color) return false;
   $c = trim($color);
   $c = str_replace('#','', $c);
   $l = strlen($c) == 3 ? 1 : (strlen($c) == 6 ? 2 : false);

   if($l){
     $rgb[0] = hexdec(substr($c, 0,1*$l)) + $brightness;
     $rgb[1] = hexdec(substr($c, 1*$l,1*$l)) + $brightness;
     $rgb[2] = hexdec(substr($c, 2*$l,1*$l)) + $brightness;



    }else{
      return false;
    }

    $out = '#';
    for($i = 0; $i<3; $i++)
      $rgb[$i] = dechex(($rgb[$i] <= 0)?0:(($rgb[$i] >= 255)?255:$rgb[$i]));

    for($i = 0; $i<3; $i++)
      $out .= ((strlen($rgb[$i]) < 2)?'0':'').$rgb[$i];

   return $out;
}

// Color Setup
$myColor = "#3399CC";
$myLighterColor = brightness($myColor, "50");
$myDarkerColor = brightness($myColor, "-50");


// Include this if using a seperate style sheet
// header("Content-Type: text/css");
?>
<style type="text/css">
  body {
    background-color:<?=$myLighterColor;?>;
  }

  #div1 {
    background-color:<?=$myColor;?>;
    border: 1px solid <?=$myDarkerColor?>;
  }
</style>

Answer 4

CSS答案是不是你不能。但是，您可以使用SASS http://sass-lang.com，但也需要预先处理。

Answer 5

或者您可以简单地使用背景图片。一个黑色（一个像素图像已足够），不透明度设置为二十或一些，一个白色也设置为20左右。

从Parent继承颜色并在CSS中执行颜色着色

5 个答案: