CSS - непрозрачный текст с низкой непрозрачностью div?

Question

У меня есть div с непрозрачностью 60%, чтобы показать часть фонового изображения за div. Поскольку непрозрачность составляет 60%, текст в этом div выглядит серым.

Есть ли способ переопределить этот уровень и сделать текст черным?

Любой совет приветствуется.

Спасибо.

Answer 1

Установите непрозрачность фона, а не элемента.

background-color: rgba(255,0,0,0.6);

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

Answer 2

Я экспериментировал с этим в прошлом на своем собственном сайте. Безусловно, самый простой способ достичь желаемого - создать однопиксельное изображение .PNG с непрозрачностью менее 100% (т.е. частично прозрачным) и использовать его в качестве фонового изображения. По умолчанию он заполнит весь содержащий элемент - убедитесь, что атрибут CSS background-repeat установлен на «repeat», если это не так.

Делая так, вам не нужно устанавливать прозрачность для самого содержащего элемента, поэтому на непрозрачность его текста это не повлияет.

Удивительно, но есть только инструмент для создания полупрозрачного однопиксельного .PNG здесь .

Answer 3

Непрозрачность применяется ко всему div и всем его дочерним элементам. К сожалению, вы не можете отменить эту прозрачность, но только добавить больше. И кроме того, у CSS нет возможности выделить текст внутри элемента.

В вашем случае лучшим решением будет применение прозрачного фонового изображения (с PNG) к вашему блоку div, например, белого однопиксельного изображения с непрозрачностью 60%.

Другим решением было бы использование различных блоков и позиционирования, как описано в этого руководства Стивена Йорка .

Answer 4

Самое простое решение - создать полупрозрачный 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) в зависимости от ситуации.

Answer 5

это должно ответить почти на все ваши вопросы: http://css -tricks.com / Непрозрачные элементы внутри прозрачных элементов /