테이블의 마지막 세 행 만들기 배경으로 병합 점점 더 투명하게

Question

테이블을 포함하는 스크롤 가능한 div가 있고 마지막 세 개의 보이는 행이 점점 더 명확 해지고 배경색이 서서히 사라 지길 원합니다. 효과는이 (http://css-tricks.com/examples/FadeOutBottom/)과 비슷하지만 테이블이 있습니다. 처음에는 div의 마지막 세 행을 선택하고 불투명도를 낮추어 요소에 적용했습니다. 이 방법이 효과적 이었지만 스크롤이 발생했을 때 마지막 세 행이 어느 것인지 다시 판단해야했습니다. 신체 상해.

내 생각은 페이지의 배경을 모방 한 (처음에는) 100 % 투명하지만, 모방 된 배경을 적용 할 때 투명도가 천천히 감소하는 div를 적용하여 효과적으로 더 많은 행을 숨기는 것이 었습니다 . 하지만 내 배경은 일정한 색상이 아니며, 색상 A에서 색상 B로 바뀌는 그라디언트이며 정확히 같은 방식으로 페이지를 만들지 않고 배경을 모방 한 큰 문제가 있습니다 (페이지 높이 100 %, A부터 색상 B). 만약 내가 그 일을 할 수 있지만, 또한 내 배경의 정확한 색칠과 함께 안녕하세요 div, 나는 실제 배경이 div의 맨 위에 있지만 몸의 아래쪽 x % 그래서 처음에 100 % 투명하게하고 싶습니다. 나는 투명도 레벨을 낮춰서 기본 테이블 위에 색상을 적용하여 텍스트를 어둡게하고 싶습니다 ... 글쎄, 완벽 할 것입니다.

나는 원래 투명도에서 그라디언트 B로가는 것이 내가 찾고있는 것을 이루 겠지만 주사위는 없다고 생각했다; 되돌아 보면 색상 A에서 색상 B로 이동하는 단계가 투명에서 색상 B로 진행할 때 발생하는 것과 동일한 단계가 아니라는 점은 놀랄 일이 아닙니다.

빠른 jFiddle 작업 중이지만 간과 한 간단한 CSS 구성 요소 나 기술이있는 경우에 대비하여이 설정을 사용하십시오.

Answer 1

나는 CSS 마스크를 살펴볼 것을 제안합니다.

예 : 내가 함께 마스크 당신이 수행하는 데 도움이 방법을 보여줍니다 빠른 JSFiddle을 던져 한 당신은 무엇을 찾고있는

table { 
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0.00, rgba(0,0,0,1)), 
    color-stop(0.70, rgba(0,0,0,1)), 
    color-stop(1.00, rgba(0,0,0,0))); 
} 

http://jsfiddle.net/Fp7dE/

현재 마스크에 대해 자세히 알아볼 수 있습니다 : http://css-tricks.com/webkit-image-wipes/