Đường viền CSS trên hình ảnh PNG có các phần trong suốt

Question

Tôi đang cố gắng thêm đường viền trên hình ảnh PNG mà tôi có (Ví dụ bao gồm). Vấn đề là khi tôi thêm đường viền hiện tại, nó thêm nó vào một hình hộp xung quanh tất cả hình ảnh chứ không phải trên vectơ chính xác (nghĩa là nó bao gồm các phần trong suốt trong hình ảnh).

Có cách nào có thể để thiết lập cấu hình của đường viền mà nó sẽ không xem xét khu vực trong suốt hay không. (? Thậm chí nếu không muốn nói trong CSS ... Có lẽ HTML5/JS)

Answer 1

đi qua cần phải làm điều này bản thân mình - đã đưa ra hack này. Một loạt các hình ảnh xếp chồng đằng sau bản gốc của tôi hơi lệch bước với nhau. Ngữ cảnh ctx3 là một bản sao của hình ảnh gốc và điều này sẽ lặp lại một hình bóng màu trắng phía sau nhiều lần ban đầu.

 ctx3.shadowColor = "rgba(255,255,255,1)"; 
     ctx3.globalCompositeOperation = 'source-over'; 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 0; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 0; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = 0; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = 0; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 

Answer 2

Tính đến bây giờ (31 tháng 1 2015) có một cách để làm điều đó mà không cần dùng vải, với CSS tinh khiết, và chỉ với 2 dòng mã.

Bí quyết là sử dụng css filter và -webkit-filter tính để vẽ hai bóng thả không có mờ, một cho trục dương và một cho tiêu cực, mà sẽ quấn xung quanh hình ảnh, mà sẽ cung cấp (hy vọng) hiệu quả mong muốn.

Lưu ý: bộ lọc css không được hỗ trợ trong IE (hãy hy vọng Spartan hoạt động tốt hơn), đây là compatibility table.

Đoạn đầu tiên này (fiddle) sẽ áp dụng đường biên đơn giản có thể.

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">

Như bạn có thể thấy, một số hình ảnh (như this awesome baymax render) cần một chút tinh chỉnh nhiều hơn, bạn sẽ nhìn thấy biên giới đúng là một chút nhỏ hơn ở bên trái.

Với ý nghĩ đó, đây là đoạn mã được hoàn thiện (fiddle) chỉ với một tinh chỉnh giá trị thực sự nhỏ.

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">

đó phải bao trùm giáp khá tốt, nhưng chúng ta vẫn có thể có nhiều niềm vui hơn với điều này, hãy nhìn tuyệt vời tác nhẹ nhàng này đoạn mã (fiddle).

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">

Hy vọng điều này sẽ giúp mọi người tự hỏi về khả năng của một bọc xung quanh biên giới cho hình ảnh bán trong suốt!

Answer 3

Tôi đã mở rộng câu trả lời hàng đầu một chút tốt hơn cho việc sử dụng của tôi.

-webkit-filter: drop-shadow(2px 2px 0 white) 
 
\t \t drop-shadow(-2px 2px 0 white) 
 
\t \t drop-shadow(2px -2px 0 white) 
 
     \t \t drop-shadow(-2px -2px 0 white); 
 

 
\t filter: drop-shadow(2px 2px 0 white) 
 
\t \t drop-shadow(-2px 2px 0 white) 
 
\t \t drop-shadow(2px -2px 0 white) 
 
     \t \t drop-shadow(-2px -2px 0 white);

Nếu ai đó vẫn cần nó.