添加圖像作爲邊框

Question

我有一個圖像，我打電話爲user_image，我有另一個圖像，我叫border_image。

我想去做，當我點擊border_image功能（* Cars2_h.gif *）它應該出現像user_image邊框（flowers.jpeg）。

現在我的老團隊成員已經在使用圖像渲染的java中完成了這個任務，我不確定他們是如何做到的。

我想在ruby中執行相同的功能（移至Ruby On Rails）。我非常需要你們的幫助。

我嘗試使用mini_magick複合方法，但它沒有按預期工作。

Answer 1

如果我正確理解你想要達到的目標，那麼在CSS中完成客戶端要容易得多。使用CSS背景屬性來定義邊框圖像，分配給CSS類，然後點擊只需切換主圖像的CSS類。提供周圍的填充以便背景可見，就是這樣。下面是一些pseude代碼，我創建了一個的jsfiddle爲你，你可以在這裏的行動http://jsfiddle.net/RK8CD/

HTML

<button id="toggle">toggle background</button> 
<img id="user_image" src="....."> 

CSS看到它

.withBackground { 
    background: url('....') repeat; 
    padding:20px; 
} 

JS

$('#toggle').click(function() { 
    $('#user_image').toggleClass("withBackground"); 
}); 

如果你想使用多個圖像作爲背景，並讓用戶選擇，那麼也許是值得的ter直接設置CSS屬性，而不是爲每個圖像創建一個單獨的類。