Это возможно с CSS 3

Question

У меня есть два DIV, один внутри другого.

<div class="outside">
<div class="inside"></div>
</div>

Внешний div имеет отступ 20px. Внутренний div имеет много контента и прокручивается. Можно ли использовать CSS3-функцию градиента (альфа), чтобы при прокрутке верх и низ внутреннего делителя исчезали во внешнем делении?

или мне нужно использовать прозрачное фоновое изображение для достижения этой цели?

Answer 1

Другой ответ, не использующий CSS3, но я уверен, что это тот эффект, который вы ищете: http://www.cssplay.co.uk/menu/fade_scroll Использует PNG / GIFs вместо новых свойств CSS, но работает в браузерах до IE5.

Answer 2

Я так не думаю.Я думал, что вы могли бы сделать это с помощью вставной тени, но я не думаю, что вам нужен тот эффект:

body, .outside {
    background:#fff;
}
.inside {
    background:#ccf;
    box-shadow:0 -20px 20px 0px #fff inset; -moz-box-shadow:0 -20px 20px 0px #fff inset; -webkit-box-shadow:0 -20px 20px 0px #fff inset;
    height:100px;
    overflow:auto;
    width:200px;
}

Answer 3

Вы можете попробовать что-то вроде этого

#outside {
    background-image: -webkit-gradient(
      linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
      to(rgba(255, 255, 255, 0))
    );

    background-image: -moz-linear-gradient(
      right center,
      rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
    );
}

Возможно, вам придется использовать цветовые остановки, если вам нужно несколько градиентов, и вы можете использовать этот инструмент для этого. http://gradients.glrzad.com/

После завершения выбора скопируйте код и замените rgb () на rgba () и добавьте еще 1 значение (в данном случае прозрачность) Используйте 0 для полной прозрачности.

Удачи!

Answer 4

Вы можете окружить внутренний div другими элементами, чтобы он отображал надлежащие градиенты в нужных направлениях.