将不透明度设置为背景图像和背景颜色

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

是否可以将背景图像保持100％不透明度并使背景颜色为50％不透明度？

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

2 个解决方案

#1

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

替换不透明度：0.5; to background-color：rgba（）解决了这个问题：

   .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

此外，如果您正在使用sass，您可以按如下方式分配颜色变量

   $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.

代表未来的读者发表。

#2

Check this Css. Easiest way to do that

检查这个Css。最简单的方法

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

#1