상자 그림자 - 뒤에서 이미지 클릭하기 + 느린 스크롤

나는 얽힌 두 가지 까다로운 문제가 있습니다. 상자의 네면에 삽입 상자 그림자 비 네트가 있지만 그림자/비 네트가 이미지 (z- 인덱스 : -1) 위에 있기 때문에 클릭 할 수없는 이미지가 있습니다. 나는 pointer-events를 사용하는 방법에 관해서 몇 가지를 읽었습니다 : 아무 것도 아니지만 그것을 사용하려고 할 때 상자 안에있는 모든것에 영향을 미치고 있다고 생각합니다. 이러한 이미지를 클릭 할 수 있지만 그림자 뒤에 숨길 수있는 방법에 대한 제안 사항은 무엇입니까?상자 그림자 - 뒤에서 이미지 클릭하기 + 느린 스크롤

또한 상자 그림자로 스크롤 속도에 대한 이전 게시물을 읽었습니다. 나는 가능한 한 작게 만들었지 만, 누군가가 그걸 더 빠르게 만드는 방법을 알아 냈습니까? 나는 모양을 정말 좋아하지만 스크롤이 너무 느린 경우 기능이 작동하지 않습니다.

여기에는 지금까지 생성 된 사이트 링크가 있습니다.

http://www.official-design.com/TEST_PROJECT.html http://www.official-design.com/TEST_GRID.html

좋은하십시오 -이에서 초보자입니다 - 나는 건축가가 아닌 웹 디자이너입니다. 모든 조언을 크게 주시면 감사하겠습니다.

출처

2012-10-07 user1725832

실제로 스크롤 속도에 문제가 있습니까? 나는 그것이 귀하의 경우에 스크립트 설정의 문제라고 생각합니다. – unclenorton

왜 링크가 z-index: -1입니까? 제거하면 링크가 제대로 작동하고 그림자가 계속 표시됩니다.

박스 섀도우를 포함하는 td이 아닌 img 또는 a 요소에 직접 적용하는 것이 좋습니다.

출처

2012-11-14 02:33:23

음수 인 z-index을 제거하면 삽입 그림자가 적용되지 않습니다. float: left

제거 불필요한 #makeMeScrollable div.scrollableArea img 규칙에서 : 당신이 필요로 달성 할 수있는 3 가지가있다. 이는 <a> 요소가 이미지를 올바르게 랩핑하도록하기위한 것입니다.
box-shadow 속성을 .SHADOW 규칙에서 삭제하십시오.
은 당신의 연결에 대해 다음 CSS를 추가 그림자가 이미지에 오버레이 할 것이기 때문에 내가 대신 #ccc의 rgba 값을 사용했습니다
```
.SHADOW a { 
    display: block; 
    -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25); 
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25); 
} 
```

참고.

부수적으로 모든 대문자로 클래스 이름을 지정할 필요는 없습니다. 가독성이 떨어집니다.

출처

2012-11-14 03:08:28 unclenorton

상자 그림자 - 뒤에서 이미지 클릭하기 + 느린 스크롤

답변

관련 문제