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?

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?

• javascript
• css
• photoshop

• pretty easy in CSS Rule opacity and using a div overlaying the image – Roljhon Commented Jan 28, 2017 at 17:09
• You want it to look like it's partially transparent, or you want it to be partially transparent? – David Thomas Commented Jan 28, 2017 at 17:11
• see this link get many other effect – Md.Shahjalal Commented Jan 28, 2017 at 17:22

2 Answers 2

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 */
}

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);
}