6

this is the effect I want

I am trying to make an image looks like it is kind of transparent? I don't really know how to describe it but it is like you can write texts on it and the image is in the back.

is this doable with css or javascript or any other language?

try-catch-finally
  • 7,436
  • 6
  • 46
  • 67
Kat
  • 113
  • 1
  • 1
  • 6

2 Answers2

9

I think what you need is a css filter.

For the very latest browsers check out these examples which use:

img {
   -webkit-filter: brightness(20%);
    filter:brightness(20%);
}

For older browsers check out these examples which use:

img {
    opacity: 0.3;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
Matthew Cawley
  • 2,688
  • 1
  • 8
  • 19
  • but this way it also reduces the brightness of the texts I put over the image right? What is a way that won't affect the color of the texts? – Kat Jan 28 '17 at 19:40
  • Is the text part of the image itself or are you putting the text in a separate tag and positioning it over the image? The first won't work but the latter will. Just make sure that the text isn't nested within the img tags. – Matthew Cawley Jan 28 '17 at 19:47
3

You can add a mask over the image like the one below:

html:

<div>
<img scr="yourImage.jpg" alt="" />
<div class="mask"></div>
</div>

css:

.mask{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.3);
}
creativenitish
  • 195
  • 6
  • also you may prefer to set opacity as mentioned by Matthew Cawley. (i mean apply both effect with desirable values...) – S.Serpooshan Jan 28 '17 at 17:34