Прозрачность на родительском фоне - PullRequest
Новая
       25

Прозрачность на родительском фоне

5 голосов
/ 07 июля 2011

Интересно, возможно ли повлиять на цвет bg или непрозрачность родительского div.

У меня есть div с этим прозрачным белым цветом: 

background-color:rgba(255,255,255,0.9);

Div содержит текстовые поля сзакругленные углы, может ли фоновый цвет текстовых полей каким-то образом быть отрицательным числом прозрачности, поэтому общая непрозрачность div и текстового поля равна 0.5?

Это как прозрачность mmore в округленной записи уже прозрачного div.

Я предложил 3 возможных решения:

  1. Сделайте родительский dic полностью прозрачным и нарисуйте div в качестве рамки вокруг полей.(Звучит очень сложно.)
  2. Снова добавьте содержимое под div, внутри текстового поля.(Производительность?)
  3. Какой-то перекресток.

Как вы думаете, что мне следует делать?

- Редактировать ---

Я использовал вариант решения № 2, я создал файл PNG.Вот (неослабленный) результат (нажмите, чтобы связаться с нами, чтобы открыть модальный div).Трудно увидеть из-за размытия, но окно тоже прозрачное.

Примечание это далеко не лучшее решение, так как нужно обновлять png, когда я обновляю содержимое под ним.

Ответы [ 3 ]

1 голос
/ 06 августа 2011

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

Возможно, вместо цвета фона вы можете сделать фон div PNG-изображением с двумя прозрачными отверстиями, совпадающими с текстовыми полями, но это обходной путь, подобный вашему ...

0 голосов
/ 23 июля 2011

Йоханнес Лунд

Да, вы должны использовать файлы изображений png, иначе все будет очень сложно с шестнадцатеричным цветовым кодированием и его математикой.

0 голосов
/ 07 июля 2011

Насколько я знаю, прозрачность, примененная к внешнему div, будет применяться ко всему внутри него. Я не знаю точно, чего вы хотите добиться здесь, может быть, вам следует опубликовать еще немного кода или макет на jsfiddle.

Вот что я могу найти по этому вопросу: http://css -tricks.com / 384-непрозрачные-элементы-внутри-прозрачные-элементы /

РЕДАКТИРОВАТЬ: Для вашей проблемы я бы попробовал (я не уверен, что это сработает), следуя аналогичному решению по ссылке, которую я разместил ранее. Разместите два отдельных элемента div, расположенных один над другим. Я бы порекомендовал вам иметь форму с вашими прозрачными входными данными на верхнем слое, может, это что-то может сделать для вас? Я не знаю, что еще сказать вам, решение png не самое лучшее, но вам может понадобиться использовать png здесь и там.

Что-то вроде этого может быть: http://jsfiddle.net/XnATc/21/

...