У меня есть div с 60% непрозрачностью, чтобы показать часть фонового изображения за div. Поскольку непрозрачность составляет 60%, текст в этом div выглядит серым.
Есть ли способ переопределить этот уровень и сделать текст черным?
Любые советы приветствуются.
Спасибо.
Установите непрозрачность на фоне, а не на элемент.
background-color: rgba(255,0,0,0.6);
Некоторое время назад я писал о том, как достичь этого в обратном режиме.
Я экспериментировал с этим в прошлом на моем собственном веб-сайте. На сегодняшний день самым простым способом добиться того, что вы хотите, является создание однопиксельного изображения .PNG с его непрозрачностью, установленной на уровне менее 100% (то есть частично прозрачным) и использовать его в качестве фонового изображения. По умолчанию он заполнит весь содержащий элемент - убедитесь, что атрибут background-repeat CSS установлен в "repeat", если он этого не делает.
Выполняя такие действия, вам не нужно устанавливать прозрачность для самого содержащего элемента, поэтому непрозрачность его текста не будет затронута.
Удивительно, что есть только инструмент для создания полупрозрачного однопиксельного .PNG здесь.
Прозрачность распространяется на весь div и всех его детей. К сожалению, вы не можете отменить эту непрозрачность, но только добавить больше. Кроме того, CSS не может выбирать текст внутри элемента.
В вашем случае лучшим решением является применение прозрачного фонового изображения (с PNG) к вашему блоку div, как белое одно пиксельное изображение с непрозрачностью 60%.
Другим решением будет использование разных полей и позиционирования, как описано в этот учебник Стивена Йорка.
это должно ответить на все ваши вопросы: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
Самое простое решение - создать полупрозрачный PNG с правильным цветом и использовать его в качестве фонового изображения.
Еще одно решение, которое может быть возможно в зависимости от вашего макета, - это разместить текст в отдельном слое и расположить его поверх верхней части полупрозрачной части. Что-то вроде этого будет работать:
<div style="position: relative; background-image: url('your_image.jpg')">
<div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
<div style="position: absolute">The text to go on top</div>
</div>
Вам нужно будет добавить свои собственные позиции/размеры (свойства top, left, width и height) соответственно.