Настройка непрозрачности фонового изображения и фонового цвета

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

Кроме того, если вы используете дерзость вы можете назначить переменную цвета, как показано ниже

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