Setting opacity to background-image and background-colour

Question

Is it possible to keep a background image 100% opacity and make the background-colour 50% opacity?

.smallIcons{
    background-color: #f00;
    opacity: 0.5; //          


        

Answer 1

Check this Css. Easiest way to do that

 .class {
   background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)
    ),url(image.jpg) no-repeat center top;
    }

Answer 2

Replacing opacity: 0.5; to background-color: rgba() Solved the issue:

   .smallIcons{
        background-color: rgba(255,0,0,0.5); // 50% background color
        background-image: url(../twiter.png); // 100% here
        background-repeat: no-repeat;
    }

In addition, If you're using sass you can assign your colour variable as below

   $col_var: #f00;
   .smallIcons{
        background-color: rgba($col_var, 0.5); // 50% background color
        background-image: url(../twiter.png); // 100% here
        background-repeat: no-repeat;
    }

Posted on behalf of future readers.