У меня есть темное/черное фоновое изображение и белое поле ввода. Я дал поле ввода непрозрачность 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 в качестве фонового изображения и установить его для повторения.