在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