title: change Image colour tint using JavaScript
body: <p>I have a image which I can apply apply colour tint, original image: </p>
  
  <p><img src="https://i.stack.imgur.com/AFftI.jpg" alt="original image">
  <img src="https://i.stack.imgur.com/CBIk7.jpg" alt="When background is applied"></p>
  
  <p>when background color applied.</p>
  
  <p>I'm using CSS to change the colour:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;style type="text/css"&gt;
      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 */
       }
       &lt;/style&gt;
      &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="background"&gt;
    &lt;div class="transbox"&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I use javascript and CSS to change an image to reflect the selected colour. I don't need to able choose from different colours, all I need is one colour and different shades of that colour that I can select, for example a chose of different of pink shades. </p>
  
  <p>Thank you :) </p>