CSS - Непрозрачный текст на низком отделении непрозрачности?
У меня есть отделение с 60%-й непрозрачностью, для показа части фонового изображения позади отделения. Поскольку непрозрачность в 60%, текст в том отделении появляется как серый.
Там должен так или иначе переопределить этот уровень и заставить текст казаться черным?
Любой совет ценится.
Спасибо.
4 ответа
Установите непрозрачность фона, а не элемента.
background-color: rgba(255,0,0,0.6);
Некоторое время назад я писал о том, как достичь этого обратно совместимым способом .
Самым простым решением было бы создать полупрозрачный 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>
Вам нужно будет добавить свои собственные позиции / размеры ( верх , левый , ширина и высота properties) в зависимости от ситуации.
Непрозрачность применяется ко всему div и всем его дочерним элементам. К сожалению, вы не можете отменить эту непрозрачность, а только добавить больше. Кроме того, CSS не может выделить текст внутри элемента.
В вашем случае лучшим решением является применение прозрачного фонового изображения (с PNG) к вашему блоку div, например белого изображения в один пиксель с непрозрачностью 60%.
Другим решением было бы использовать другие блоки и позиционирование, как описано в этого руководства Стивена Йорка .
это должно ответить почти на все ваши вопросы: http://css-tricks.com/non-transparent-elements-inside-transparent -элементы /