skip to Main Content

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?

2

Answers


  1. 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 */
    }
    
    Login or Signup to reply.
  2. 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);
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search