Как создать градиент непрозрачности без цветов на границах div?

Question

У меня небольшая проблема, но я не уверен, что есть решение.

В основном я хочу создать градиент непрозрачности на границах div, не зависящих от цвета.

Позвольте мнеобъяснение.

У меня есть «переполнение: скрытый» div (который мы будем называть MainDiv), который содержит еще один большой div (который будет вызывать SlideDiv), который я перемещаю по области просмотра с помощью jquery.Основной элемент div имеет фоновое сложное изображение «полный видовой экран», которое также перемещается.Все это создает действительно хороший эффект параллакса.

Как и ожидалось, содержимое «SlideDiv» исчезает за границей области просмотра.Теперь вот трюк.Я бы хотел, чтобы контент не просто исчезал, а исчезал:)

Чтобы это работало, мне нужно создать градиент непрозрачности на границах области просмотра.А поскольку на фоне сложное изображение, которое должно быть видно постоянно, этот градиент не может быть связан с цветом.Другими словами, я бы хотел, чтобы «непрозрачность: 1 (мы видим содержимое) к непрозрачности: 0 (мы не видим содержимое)» градиент, а не «непрозрачность: 0 (мы видим содержимое) к белому /Непрозрачность Black / Green / AnyColor: 1 (содержимое скрыто за непрозрачным цветом) "Градиент.

Это означает, что я не могу использовать -webkit-Gradient или -moz-Line-Gradient.Или я могу?

Боюсь, я не могу показать вам что-либо по причинам, связанным с бизнесом.

Вопросы: - Возможно ли это с помощью CSS2 или 3, jQuery или плагина илилюбая другая технология (кроме flash)?- А если так, то как?:)

Надеюсь, я ясен, но я не очень уверен, извините, ребята;)

С уважением, Jibou

Answer 1

Круто. Что я получаю от всего вашего запроса, это i.) Вы хотите применить градиент к границе ii.) Также вам нужен эффект постепенного исчезновения и затухания к границе.

если я понял это правильно или очень близко, вы можете использовать следующие приемы.i.) Посетите эту ссылку , чтобы получить градиент на границе с помощью css.II.) Это может быть сложно: вы можете создать фигуру SVG для с градиентами и поместить ее с абсолютным позиционированием в ваш основной div с полной шириной и высотой (есть много других способов управления высотой и шириной элемента.).Поскольку это будет SVG-изображение или сценарий, вам не нужно беспокоиться о результате.

, если я не достиг решения вашей проблемы.дайте мне знать, я попробую еще раз.

Answer 2

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