Как сделать прозрачность поля ввода не влияет на цвет текста внутри него?

У меня есть темное/черное фоновое изображение и белое поле ввода. Я дал поле ввода непрозрачность 50%, и я хочу, чтобы текст/значение было сплошным белым (#fff). НО, когда я применяю непрозрачность, он влияет как на фон входного элемента, так и на текст. Как мне изменить фон поля ввода?

Ответы

Ответ 1

Для этого вы можете использовать background-color: rgba(0, 0, 0, 0.5). Первые три цифры - это цвет фона в формате rgb (красный, зеленый, синий), а четвертое число - это уровень непрозрачности по шкале от 0 до 1.

Ответ 2

Почему бы просто не сделать полупрозрачный png и использовать это как фоновое изображение вместо установки непрозрачности ввода? Или, если вам не нужно поддерживать IE8, вы также можете использовать rgba().

Ответ 3

Из того, что вы говорите, вы хотите, чтобы был затронут фон.

Для того, чтобы быть (частично) трансарантным фоном, вы должны использовать

a) Фон PNG

или

b) фон RGBa - см. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

Так же: background:rgba(0,0,0,0.2);

Это не поддерживается в IE8 и ниже.

Ответ 4

Проблема в том, что вы изменяете непрозрачность для всего элемента. Таким образом, все дочерние элементы строго наследуют прозрачные свойства.

Есть несколько вещей, которые вы можете сделать.

  • Вы можете настроить только фоновый рисунок и установить его в значение RGBA:

    background: rgba(255, 255, 255, 0.5);

    Это не работает в IE8 и раньше, поэтому вы можете использовать обходной путь с использованием линейных фильтров градиента:

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );

    Вы заметите, что первые 2 шестнадцатеричных места - # 80. Это не ошибка и не является десятичным значением. Hexadecimal - это базовая 16, это означает, что средняя точка 80 означает, что ваша непрозрачность составляет 50%. Это немного запутанно, я знаю!

  • Вы можете удалить стиль из поля ввода и вместо этого добавить обертку вокруг полей ввода и стиля.

  • Вы можете использовать полупрозрачный PNG в качестве фонового изображения и установить его для повторения.