반투명 이미지 주위에 테두리를 그리는 방법은 무엇입니까? (css)

Question

반투명 한 이미지 주위에 테두리를 그리는 방법이 궁금합니다. 즉 상자 모양의 테두리 나 테두리 반경을 원하지 않지만 테두리 모양은 실제로 이미지의 모양에 적용됩니다. 그 자체.

this post에 따르면 불가능하며 this one은 Photoshop과 같은 일부 사진 편집 프로그램에서 이미지를 편집하는 것이 좋습니다.

하지만 이미지 입력이 내 것이 아닌 경우 어떻게해야합니까? 내 웹 사이트에 일련의 사용자 입력 이미지를 처리하고 테두리를 추가해야하는 경우 소프트웨어 옵션이 작동하지 않습니다.

캔버스를 사용하는 한 가지 방법은 없지만이 작업을 수행하는 순수하고 간단한 CSS 방법이 아닌가요? 감사.

Answer 1

현재 (1 월 31 일 2015) 캔버스를 사용하지 않고 순수한 CSS와 2 줄의 코드 만 사용하면됩니다.

간계 (을 희망)을 제공 할 이미지를 둘러싸는 더 흐림 양 축 용과 제외 하나, 두 그림자를 그리는 CSS filter 및 -webkit-filter 속성을 사용

원하는 효과.

주 : CSS 필터가 모든 IE (의 스파르탄 더 나은 않는 희망하자)에서 지원되지 않습니다, 여기 compatibility table이다. (감사합니다 web-tiki)

이 첫 번째 발췌 문장 (fiddle)은 인 가장 간단한 경계 을 적용 할 것입니다.

당신이 볼 수 있듯이

img { 
 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 black); 
 
    filter: drop-shadow(1px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 black); 
 
} 
 

 
body { 
 
    background-color: lightcoral; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

, 일부 이미지 (같은 this awesome baymax render)는 오른쪽 테두리가 왼쪽보다 약간 작은 볼 수있는, 좀 더 조정이 필요합니다.

이것을 염두에두고 여기에 국경 스 니펫 (fiddle)을 완성했습니다. 아주 작은 값으로 수정했습니다. 꽤 잘 국경을 커버해야

img { 
 
    -webkit-filter: drop-shadow(2px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 black); 
 
    filter: drop-shadow(2px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 black); 
 
} 
 

 
body { 
 
    background-color: khaki; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

,하지만 우리는 여전히이 멋진 밝기 효과를 보면,이 더 재미있을 수는 (fiddle)를 니펫을. 이 사람이 반투명 이미지 랩 - 어라운드 (wrap-around) 국경의 가능성에 대해 궁금해하는 데 도움이

img{ 
 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 white); 
 
    filter:drop-shadow(1px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 white); 
 
} 
 

 
body{ 
 
    background-color:lightblue; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

희망!