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

Question

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

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

Answer 1

取代opacity: 0.5; 到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;
    }

另外，如果您使用的是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;
    }

代表未来的读者发表。

Answer 2

检查此CSS。 最简单的方法

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