Как сделать фоновое изображение прозрачным с помощью JavaScript

Question

Возможно ли изменить фоновое изображение, чтобы оно было прозрачным при загрузке изображения пользователем? Если да, можете ли вы мне помочь?

Answer 1

Ваш вопрос выходит из многих деталей, которые могут иметь отношение к этому вопросу, так что я собираюсь сделать некоторые предположения для простоты:

1. Метод, с помощью которого пользователь будет загружать изображение не имеет значения для прозрачного фона.
2. Метод, по которому вы получаете ссылку на элемент, о котором идет речь, не имеет значения для вопроса.
3. Оригинальный фон сплошной цвет.
4. Вам не нужно устанавливать несколько фонов на один и тот же элемент, но вместо этого нужно, чтобы другой элемент отображался через прозрачный фон.
5. Прозрачный здесь означает частично прозрачный: это означает, что вы все еще можете увидеть исходный фон в некоторой степени, но также можете видеть все, что находится под ним.

В общем, вы можете установить фон элемента прозрачного в JavaScript, регулируя его свойство background-color стиля к RGBA (красный-зеленый-синий + альфа-канал) цвета. Вы делаете это так:

referenceToElement.style.backgroundColor = "rgba(rValue, gValue, bValue, aValue)"; 

В этом фрагменте кода, цвет определяется его значением RGB разделения на три целых чисел, каждое из которых составляет от 0 до 255. Таким образом, для черного (шестнадцатеричное значение # 000000) вы» d установите его на 0 красным (rValue), 0 зеленым (gValue) и 0 синим (bValue); затем установите альфа-прозрачность (aValue) на число от 1 (полностью непрозрачное) до 0 (полностью прозрачное). Так что, если вы хотите, скажем, 30% прозрачности: вы установите ее на 0,30. Полагая, что все вместе, вы можете получить черный на 30% прозрачности с:

referenceToElement.style.backgroundColor = "rgba(0, 0, 0, 0.30)";