Задать непрозрачность элемента внутри div с непрозрачностью, определенной CSS?

Question

Я работаю над проектом, в котором я использую изображение в качестве фона для меню. Я определил классы в моей таблице стилей CSS, которые определяют внешний вид, когда элементы выбираются или не выбираются, то есть пользователь не находится на странице, с которой связан каждый элемент.

У меня это структурировано с помощью div поверх изображения со стилями, примененными к нему, чтобы сделать его полупрозрачным белым фоном, так что, похоже, эта часть изображения выделена. Каждый полупрозрачный элемент div также содержит текст, составляющий ссылку, с цветом, установленным на белый. Я бы хотел, чтобы div сохранял непрозрачность, а текст остается непрозрачным «1».

Я попробовал метод, рассмотренный в аналогичном вопросе ( CSS - применить непрозрачность к элементу, но НЕ к тексту внутри элемента ), но метод, похоже, не работает для меня.

Я разместил фрагмент кода для ссылки в JSFiddle на http://jsfiddle.net/Cwca22/uG5y8/, если вы хотите взглянуть на него.

Заранее спасибо за помощь.

Answer 1

Если вы ищете чистое CSS-решение и хотите немного изменить разметку, взгляните на этот пример:

http://jsfiddle.net/jJ4MZ/3/

Он обрабатывает каждую «ссылку» как комбинацию отдельных фоновых и текстовых элементов, а затем размещает их друг над другом, так что только фоновый div использует прозрачность.

Answer 2

Если я правильно вас понимаю, вы хотите, чтобы цвет фона div был частично прозрачным, чтобы показать изображение насквозь, но оставить текст непрозрачным?Это просто: 3

<div style="background-color: rgba(255,255,255,0.5);">Text</div>

Если вы хотите обеспечить поддержку браузеров, которые не поддерживают этот формат, вам необходимо:

<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>

Answer 3

Однажды я написал jsFiddle для такой проблемы.Здесь это http://jsfiddle.net/A53Py/5/

Создайте элемент такого же уровня, который расположен абсолютно позади элементов без непрозрачности.Нет необходимости говорить, что это кросс-браузер .

Надеюсь, это поможет

Answer 4

Старая проблема без каких-либо стандартных решений!Это то, что, как известно, невозможно с сегодняшним CSS.Единственное известное мне решение - это использование JS.Используя JS, вы можете поймать движение мышью затронутого H # и создать / позиционировать элемент.Этот новый элемент «over» не должен быть дочерним для DIV с непрозрачностью 0.2.