在 img 标签上叠加图形边框答案

【问题标题】：Overlay graphic border on img tags在 img 标签上叠加图形边框
【发布时间】：2014-01-18 04:25:00
【问题描述】：

我希望能够在网站上的所有图像上叠加图形边框，而无需在 Photoshop 中手动应用它。我使用的边框是一个粗糙的“苦恼”图形，因此无法通过使用 css 边框来实现。

我最初的想法是使用 javascript 将包含边框图形的周围 div（或 div）动态添加到所有 img 标签，虽然我不太确定如何做到这一点。

【问题讨论】：

@Joseph 还没有 - 我想不出 CSS 解决方案，正如我所提到的，虽然我认为 javascript 可能是最好的解决方案，但我不知道该怎么做。跨度>

【解决方案1】：

我建议使用以下 JavaScript：

var D = document,
    images = D.getElementsByTagName('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.

参考资料：

【讨论】：

【解决方案2】：

还有一个使用 CSS3 的替代方案。

示例 sn-p：

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

参考资料：

免责声明：CSS3 目前不完全支持跨浏览器，此解决方案假定我们的目标是在 Web 开发中向前发展以针对现代浏览器。

【讨论】：

【解决方案3】：

您可以将边框设置为背景图片并将图片放入其中并添加一些边距

查看我的jsfiddle

【讨论】：

【解决方案4】：

你应该可以用 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'，你也可以调整填充，你只需用你的替换背景图片的url。希望这会有所帮助/有效！

【讨论】：

jQuery is not the answer to everything.