Question

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?

Say I have this html:

<img src="my_image.jpg" height="200" width="300" style="background:url(img/bg.jpg) repeat;" />

I want to somehow target the source image and set the opacity to i.ex. 0.7 .

With jQuery I could copy the src, height and width of the image and manipulate the markup into something like this:

<div style="background:url(img/bg/jpg) repeat; height:200px; width:300px;">
    <div style="background:url(my_image.jpg); height:200px; width:300px; opacity:0.7;"></div>
</div>

But does anyone have a better/simpler suggestion for how to do make this happen? Preferrably without manipulating the markup.

Answer 1

I don’t think you can do this with just an <img/>. Try:

<div class="image-wrapper">
  <img src="my_image.jpg" height="200" width="300"/>
</div>

.image-wrapper {
  display: inline-block;
  background: url(img/bg.jpg) repeat;
}
.image-wrapper img {
  vertical-align: top;
  opacity: 0.7;
}

and a fiddle.