在img標籤上覆蓋圖形邊框

Question

我希望能夠在網站上的所有圖像上疊加圖形邊框，而無需在Photoshop中手動應用它。我使用的邊框是粗糙的'心疼'圖形，因此無法通過使用css邊框來實現。

我最初的想法是使用JavaScript動態地添加一個包含邊框圖形的周邊div（或divs）到所有img標籤，雖然我不太清楚如何做到這一點。

Answer 1

有使用CSS3的替代品。

例片段：

img { 
    border-width: 20px; 
    -moz-border-image:url("border.png") 20 repeat stretch; 
    -webkit-border-image:url("border.png") 20 repeat stretch; 
    border-image:url("border.png") 20 repeat stretch; 
} 

jsFiddle

參考文獻：

• The W3C Candidate Recommendation
• The W3C Working Draft
• On Mozilla Developer Network
• On CSS-Tricks

免責聲明：CSS3目前沒有跨瀏覽器完全支持，這種解決方案假定我們的目標繼續前進，網絡的發展爲目標的現代瀏覽器。

Answer 2

你應該可以用JQuery來做到這一點，我測試了這個腳本，它爲我工作。我只是給圖像一個背景圖像並添加了填充。

你會叫的JQuery在標題：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

那麼你可以試試這個腳本：

<script> 
    $(document).ready(function(){ 
     $('img').css({ 
      'background' : 'url(images/002.jpg) repeat', 
      'padding' : '10px' 
     }); 
    }); 
</script> 

你可以用你的類替換 'IMG'，例如 '.border'，你也可以調整填充，你只需要用你的替換背景圖片的網址即可。希望這有助於/工作！

Answer 3

我建議以下JavaScript：

var D = document, 
    images = D.getElements​ByTagName('img'); 

function imageWrap(el, wrapper) { 
    if (!el) { 
     return false; 
    } else { 
     var wrapper = wrapper || 'div', 
      d = D.createElement(wrapper); 
     el.parentNode.insertBefore(d, el.nextSibling); 
     d.appendChild(el); 
    } 
} 
for (var i = 0, len = images.length; i < len; i++) { 
    imageWrap(images[i]); 
} 

JS Fiddle demo。

參考文獻：

• appendChild()。
• createElement()。
• getElementsByTagName()。
• insertBefore()。
• parentNode。

Answer 4

你可以讓你的邊界作爲背景圖像，並把圖像裏面，並添加一些餘量

檢查我jsfiddle