Как изменить непрозрачность цвета фона (не текста) с помощью JavaScript?

Question

Я хотел бы взять существующий цвет фона элемента div и настроить только непрозрачность ... как бы я это сделал?

---

Нашел очень простое решение моей проблемы; требуется плагин jquery-color , но, на мой взгляд, это лучшее решение:

$('#div').css('backgroundColor', $.Color({ alpha: value }));

Answer 1

Непрозрачность непроста, потому что до сих пор нет кросс-браузерного механизма, хотя он должен быть в CSS3.

Скорее всего, вы захотите изменить альфа-канал стиля background-color. Смотри: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

---

Кто-то разработал плагин JQuery, который делает именно то, что вы хотите: http://archive.plugins.jquery.com/project/backOpacity

С помощью этого плагина вы можете контролировать только "непрозрачность", не затрагивая дочерние элементы.

Answer 2

Плагин цвет запроса - хорошее решение, однако Я твердо верю, что не нужно перегружать ваше приложениененужные плагины для такой простой и простой задачи.

Вот еще один подход, использующий строки :

var alpha = "0.8";

var oldBGColor = $('#div').css('backgroundColor');
// rgb(40,40,40)

var newBGColor = oldBGColor.replace('rgb','rgba').replace(')', ','+alpha+')'); 
// rgba(40,40,40,.8)

$('#div').css('backgroundColor', newBGColor);

Вот это jsFiddle пример того, как его использовать.

У меня была аналогичная проблема , и она сделала для меня магию.

Answer 3

Если вы хотите перейти от непрозрачности x.xxx к 1, вы можете сделать

var element = $("#id")
element.css('backgroundColor', element.css('backgroundColor').replace(/(\d\.?\d*)\s*\)/i, "1") )

, чтобы сделать обратное, просто измените 1 на желаемое значение.

Обратите внимание на ваш цветиметь формат «rgba (100, 100, 100, 0.85098)» с самого начала

Answer 4

Загрузите фоновое изображение или цвет в Photoshop, уменьшите непрозрачность и сохраните его как изображение .jpeg, а затем используйте его в качестве фона в HTML.

Просто так ....: D