将不透明度设置为背景图像和背景颜色 [英] Setting opacity to background-image and background-colour

问题描述

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

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

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

推荐答案

替换不透明度：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，则可以将颜色变量指定为以下

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;
    }

代表未来的读者发布。

这篇关于将不透明度设置为背景图像和背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！