2011-10-02 5 views
9

내 div에 투명한 드롭 섀도우를 추가하고 싶습니다. 컨테이너가 있고 그 뒤에 배수로를 놓고 싶습니다. 나는 그림자가 색깔을 가지기를 원하지 않는다. 이것은 내가 지금까지 무엇을 가지고 : 나는 불투명도를 추가 할CSS가있는 드롭 섀도우

.content_right1{ 

    background:#fff; 

    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius:10px; 

    -moz-box-shadow: 5px 5px 5px #99CCFF; 
    -webkit-box-shadow: 5px 5px 5px #99CCFF ; 
    box-shadow: 5px 5px 5px #99CCFF; 

    /* other styles of the class */ 
    width:380px; 
    float:left; 

    margin-left:3px; 
    padding:15px; 

    min-height:450px; 
    margin-left:15px; 
} 

하지만 전체 DIV 변화의 불투명도를 수행 할 때.

+0

, 방법을 수 dropshadow에는 어떤 색깔도 없습니까? 단색 (흑백 전용)을 의미합니까? 그렇지 않습니다. 효과가 있습니까? – Pat

+0

색깔이없는 그림자를 원하십니까? 색깔이 없다면 보이지 않을거야. 그래서 ... 네가 설명해 줄 수 있니, 조금 더 분명하게, 네가 원하는 걸? 현재 코드가 잘못된 점은 무엇입니까? –

+0

'opacity' 스타일 속성은 요소에 적용된 효과가 아니라 적용된 요소의 불투명도에 영향을주기위한 것입니다. –

답변

2

질문이 궁극적으로 조금 불투명한데 (의도 한 말장난), 다음과 같이 기대하는 바가 있습니까?

http://jsfiddle.net/zCTC8/2/

나는 기본적으로 한 모든

-moz-box-shadow: 5px 5px 5px #dddddd; 
-webkit-box-shadow: 5px 5px 5px #dddddd; 
box-shadow: 5px 5px 5px #dddddd; 

는 선언 ( #dddddd, 또는 #ddd)의 마지막 값이 그림자의 색상 값을 조정했다. 이것은 16 진수 값입니다. 더 많은 예제 여기를 참조하십시오 :

http://html-color-codes.com/

#ddd/#dddddd은 밝은 회색 색상을 나타냅니다; #eee은 가볍고 #ccc은 더 어둡고 #fff은 흰색이고 #000은 검은 색입니다. #000 값은, 0-9A-F (진해> 광)의 유효 값으로 나타낸다 RGB되도록 :

#f00 = red (R) 
#0f0 = green (G) 
#00f = blue (B) 

중간 적색 (9)가 제공 #99CCFFfrom your question#9CF 동등 값, 밝은 녹색 (C), 흰색 (F). 이 값들의 혼합은 당신이 보았던 밝은 청색 음영을 제공합니다. 그래서 "그림자 같은"색상 (회색 음영) 대신에 색상을 얻었습니다.

내 색 이론은 약간 녹슬어 졌으므로 누군가 내가 뭔가를 가라 앉혔다면 누군가가 나를 바로 잡습니다. 당신이 불투명도의 수준과의 DropShadow를 원하는 경우

38

, 당신은 그림자 색을 RGBA()를 사용한다 :

http://css-tricks.com/2151-rgba-browser-support/

편집 : 호기심에서

-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3); 
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3); 
box-shadow:5px 5px 5px rgba(0,0,0,0.3); 
+0

페이지가 발견되지 않았습니다. 또한이 파일이 React Native ...에 필요합니다. –