Полупрозрачный слой, но щелчки переходят на нижний слой - PullRequest
Новая
       29

Полупрозрачный слой, но щелчки переходят на нижний слой

3 голосов
/ 24 января 2012

Мне нужно полупрозрачное изображение, наложенное поверх всего на моей веб-странице, но чтобы пользователи могли переходить к полям ввода формы и текстовым полям внизу.Пользователь не будет взаимодействовать с верхним слоем изображения.

Я думаю, я могу создать изображение и настроить непрозрачность в фотошопе.Затем поместите png в div с соответствующим z-индексом.Но затем пользовательские клики по-прежнему идут в этот верхний div, а не в нижележащие слои.

Есть ли что-то еще, что я могу сделать здесь, или другой метод для достижения желаемого эффекта?

Я просто работаю с HTML, CSS, JS.Нет серверных вещей.Спасибо!

Ответы [ 2 ]

2 голосов
/ 24 января 2012

Для клика по изображению / div, проверьте ответ:

Перейдите через DIV к базовым элементам

.

Код цитирования:

CSS 

 pointer-events:none;
 background:url('your_transparent.png');

IE условный 

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png',

sizingMethod = 'шкала'); фон: нет! важно;

Вот базовый пример страницы со всем кодом.

http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html

Обновление:

Вы можете комбинировать его с этой техникой http://jsfiddle.net/jpCfz/6/ из Сделать наложение фона кликабельным для IE (вопрос в том, работает ли он в IE, но не в Firefox), или вы можете нужен немного JavaScript, который описан в Перейдите через DIV к базовым элементам другой ответ, чем приведенный выше.

Обновление 2:

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

1 голос
/ 24 января 2012

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

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

<div id="image" style="background: url(...); position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<div id="content-container" style="background: #fff; opacity: .6;">
  <!-- form elements, etc -->
</div>

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

...