Как маскировать divs с помощью маски с линейным градиентом?

Question

Я пытаюсь вымыть содержимое div по краям, используя пару абсолютно позиционированных наложений div с обеих сторон. Тем не менее, мне нужно, чтобы страница была доступна для просмотра после завершения затухания, а во всем - эффективного маскирования содержимого одного div, используя 2 других с линейными градиентами «затухания». Смотрите схему ниже для лучшего объяснения ...

Я попытался следующие:

• Используйте -webkit-mask свойство с линейным градиентом. Это работает в Webkit, но ничего больше. Кроме того, линейный градиент является довольно изменчивым и stacatto при использовании с свойством mask. Не идеально.
• Используйте градиентную маску SVG (например, in the Firefox/MDN demo). Работает, но только в Firefox. Не где-то рядом с плохим градиентом -webkit-mask/linear-gradient в Chrome, хотя
• Использование прозрачного маскирования GIF или PNG. Однако в примере, который я использовал, отображается цвет маскировки (см. this SO question).

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

Answer 1

Я бы подумал, что прозрачная PNG будет лучшей ставкой, сделайте ее абсолютной с более высоким индексом z и сделайте ее внутри контейнера div. Этот контейнер div будет плавать на фоне скользящего изображения? Я бы использовал очень маленький срез 2 px и просто повторил его вдоль оси y, но я, возможно, не вижу вашу проблему правильно.

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

#container { 
background-attachment: scroll; 
background-image: url(Untitled-1.jpg); 
background-repeat: repeat-x; 
clear: both; 
float: left; 
height: 768px; 
width: 80000px; 
position: relative; 
} 
#container #info { 
float: left; 
width: 630px; 
margin-right: 20%; 
margin-left: 20%; 
position: fixed; 
margin-top: 100px; 
height: 519px; 
clear: both; 
clip: rect(100px,auto,auto,auto); 
} 
#container #info #l_side { 
background-image: url(left_.png); 
background-repeat: repeat-y; 
float: left; 
height: 519px; 
width: 165px; 
position: relative; 
margin-right: -2px; 
} 
#container #info #content { 
background-color: rgba(0, 0, 255, 0.56); 
color: rgba(0, 0, 255, 0.56); 
float: left; 
height: 519px; 
width: 300px; 
position: relative; 
} 
#container #info #r_side { 
background-image: url(Right.png); 
background-repeat: repeat-y; 
float: left; 
height: 519px; 
width: 165px; 
position: relative; 
margin-left: -1px; 
}