使用JavaScript更改图像颜色色调

时间:2012-04-17 18:01:50

标签: javascript html css

我有一个可以应用的图像应用颜色色调,原始图像:

original image When background is applied

应用背景颜色时。

我正在使用CSS来改变颜色:

<html>
  <head>
  <style type="text/css">
    div.background
     {
     width:480px;
     height:300px;
     background:url(whiteroom.jpg) repeat;
     }
   div.transbox
    {
     width:480px;
     height:300px;
     background-color:#FF3E96;
     opacity:0.5;
     filter:alpha(opacity=60); /* For IE8 and earlier */
     }
     </style>
    </head>
<body>
  <div class="background">
  <div class="transbox">
  </div>
  </div>
  </body>
</html>

如何使用javascript和CSS更改图像以反映所选颜色。我不需要选择不同的颜色,我需要的只是一种颜色和我可以选择的那种颜色的不同色调,例如选择不同的粉红色调。

谢谢:)

1 个答案:

答案 0 :(得分:1)

您可以使用CSS:

<div class="background">
  <div id="tint" class="transbox blue"></div>
</div>


div.transbox.blue {
      background-color:#0000ff;   
}

JS:

document.getElementByClassName('tint').setAttribute('class', 'transbox blue')