lighter background-image CSS3

Question

I have want to have a background-image one frame, but i need to make the image lighter. I have tried using opacity, but then a background image from another frame shines throungh. I also have some text in the same frame, and i don't want that text to get lighter.

I write in CSS3, here is my code;

        .frameContent
     {
        background-image: url(/image/and_02.jpg); 
        background-size: 100%;
        vertical-align: top; 
        border-left: #FFFFFF 20px solid;
        border-right: #FFFFFF 20px solid;
        border-top: #FFFFFF 15px solid;
        padding: 25px 10px 10px 10px;
        height:100%;
        box-shadow: 2px 2px 2px;
    }

Answer 1

As Bappi Das said, there is no background-opacity property. But background-image can take multiple parameters. We can use this to add some white in front of the image. Unfortunately, we cannot simply specify a color, but we can specify a gradient. So if we specify a gradient with two times the same color and make that color slightly transparent using rgba, we can alter the color of an image.

background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
                  url("/image/and_02.jpg");

Answer 2

Do this to the container element:

yourImageContainer:after {
  content: "";
  position: fixed;
  top: 0; bottom: 0; left: 0; right: 0; 
  background: hsla(180,0%,50%,0.25);
  pointer-events: none;
}

this will put a darker/lighter mask depending on what color you chose.