title: Transparent src so that background shows through
body: <p>Do you know how to make the source image of an img tag transparent so that one can see the background image through the src image?</p>
  
  <p>Say I have this html:</p>
  
  <pre><code>&lt;img src="my_image.jpg" height="200" width="300" style="background:url(img/bg.jpg) repeat;" /&gt;
  </code></pre>
  
  <p>I want to somehow target the source image and set the opacity to i.ex. 0.7 .</p>
  
  <p>With jQuery I could copy the src, height and width of the image and manipulate the markup into something like this:</p>
  
  <pre><code>&lt;div style="background:url(img/bg/jpg) repeat; height:200px; width:300px;"&gt;
      &lt;div style="background:url(my_image.jpg); height:200px; width:300px; opacity:0.7;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But does anyone have a better/simpler suggestion for how to do make this happen? Preferrably without manipulating the markup. </p>