Применить непрозрачность только к цвету фона кнопки, а не к цвету текста

Question

Мне нужно применить прозрачность только к цвету фона кнопки при наведении. Цвет текста кнопки не должен находиться под влиянием непрозрачности.

Когда я применяю непрозрачность ... цвет текста кнопки также становится темным .. он должен быть таким, какой он есть .. Я пытался использовать линейный градиент с черным цветом, чтобы получить эффект непрозрачности, но он показывает полностью черный цвет ..

plunker link -> http://plnkr.co/edit/HLoQf4fznVFx8OK10Wdl?p=preview

Answer 1

Свойство opacity добавляет прозрачность фону элемента и всем его дочерним элементам. Чтобы не применять прозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA.

#btn:hover {
background: rgba(219, 15, 15, 0.973);
 }

Answer 2

Вы не должны давать непрозрачность при наведении, вы должны справиться с этим через фоновый RGBA. Первые три числа - это красные, зеленые и синие значения для цвета фона, а четвертое - это значение альфа-канала, которое работает так же, как значение непрозрачности. См. Эту страницу для получения дополнительной информации: http://css -tricks.com / rgba-browser-support / . Вот рабочая ручка

#btn {
  background: rgba(219, 15, 15, 1);
  color: #fff;
}

#btn:hover {
  background: rgba(219, 15, 15,.5);
}

<h1>Hello Plunker!</h1>
<button id="btn" type=button>Click Me</button>

Примечание. Попробуйте изменить цвет кнопки, чтобы увидеть эффект непрозрачности.

Answer 3

Вы можете переопределить цвет фона только с помощью rgba, что позволяет передать непрозрачность в качестве четвертого аргумента.

button{
    background: rgba(255,0,0,1);
}
button:hover{
    background: rgba(255,0,0,0.5);
}