CSS 상자 그림자 + ​​투명 배경 이미지 = 직관적 인 고장

Question

• 일부 링크의 배경 이미지로 사용하고 있습니다.
• 배경 이미지의 모서리가 둥글다.
• 내가 이미지

문제가있는 그림자를 넣는 대신 CSS의 그림자를 사용하려면, 그림자는 요소 주위에 를 그려 질 것으로 보인다. 백그라운드 이미지의 투명한 부분을 통해 그림자 색상을 볼 것으로 예상 되긴했지만 백그라운드 색상 (see this jsfiddle)을보고 있습니다.

내 실제 목표는 좀 더 복잡하지만 처음 세 개의 글 머리 기호를 만족시킬 수 있다면이 작업을 할 수 있습니다. 특히, 버튼 이미지의 오른쪽과 왼쪽 부분 (둥근 모서리)의 배경 이미지가있는 두 개의 중첩 요소를 사용하여 동일한 CSS를 사용하여 길이가 다른 텍스트를 '단추'로 묶을 수 있습니다. 배경이 CSS 슬라이딩 도어 스타일로 겹쳐지기 때문에 PNG 알파 드랍 섀도우는 이미지가 겹치는 2x 어두운 섹션을 보여줍니다. Soo .. 나는 CSS 그림자를 사용할 줄 알았지 만 jsFiddle에서 볼 수 있듯이 거기에도 문제가 있습니다.

아이디어가 있으십니까?

Answer 1

상자 그림자는 투명 배경을 통해 표시되지 않습니다. 더 간단한 테스트 케이스는 다음과 같습니다.

.box { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: transparent; 
    box-shadow: 0 0 10px #000; 
}​ 

예상되는 출력은 멋진 검은 색 사각형이 될 것입니다. 글쎄 ... 아니야, 그림자가있는 흰색 사각형이야. http://jsfiddle.net/UjhrW/

은 ... 당신이의 DropShadow를위한 별도의 마크 업을 필요 흰색으로 채우기, 다음은 흐릿한 사각형 모양 때문에 그림자의 유출을 설정합니다 수행 할 작업을 달성하기 위해

.box { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: #000; 
    box-shadow: 0 0 10px 6px #000; 
}​ 

http://jsfiddle.net/Etmty/