CSS 배경 부착 : 방향이있는 로컬 : rtl

div를 스크롤 할 때 스크롤 가능한 div가 있고 div 상단에 그림자를 구현하려고했습니다. https://codepen.io/bennyzhao/pen/iGoBm CSS 배경 부착 : 방향이있는 로컬 : rtl

이 예는 나를 위해 일했다,하지만 난 주위를 연주 후, 나는 direction이 rtl로 설정되어 background-attachment: local의 행동에 이상한 뭔가를 발견 :

나는 codepen에이 간단한 구현을 발견했다. 이상한 행동을 보여 codepen에 내가 아주 간단한 예제를 만들었습니다

는 : https://codepen.io/Ron537/pen/ZLaqoG

나는 문제가 Google Chrome에 존재하지만 Microsoft Edge와 함께 잘 작동 것으로 나타났습니다. 여기

는 이미지 comparasion에 있습니다 : 배경이없는 전체 DIV 폭을 차지 Google Chrome로 Chrome vs Edge

당신이 볼 수 있듯이,하지만 약간의 빈 공간을 남긴다.

알려진 버그입니까? 해결 방법이 있습니까?

출처

2017-01-28 Ron537

을 살펴하지 않습니다 있나요? https://codepen.io/anon/pen/XpzobB – Banzay

박스 - 섀도우로 스크롤 할 때만 그림자를 보여 주겠다는 목표를 달성 할 수 없다. 나의 예제는 "버그"를 재현하는 단계를 보여주는 것이다. .. 어쩌면 div를 스크롤 할 때만 순수한 CSS를 사용하고 그림자를 보여주는 다른 방법이 있을까요? – Ron537

': before' 의사 요소를 사용하려고합니다 – Banzay

:before 유사 요소를 사용하는 실제 해결책이있는 것 같습니다. 그냥 .scrollbar에서 .scrollbar:before에 그라데이션을 이동 :

.scrollbar:before{ 
    content: " "; 
    height: 30px; 
    width: 100%; 
    background: linear-gradient(red, white); 
    background-size: 100% 30px; 
    background-repeat: no-repeat; 
    background-attachment: local; 
    display: block; 
    position: absolute; 
    z-index: -1; 
}

두 가지 속성 : background-repeat: no-repeat; 및 background-attachment: local; 중복 것 같다.

당신은`박스 shadow` 속성을 사용하려면 codepen

출처

2017-01-29 10:49:10 Banzay

CSS 배경 부착 : 방향이있는 로컬 : rtl

답변

관련 문제