Question

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

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

Answer 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

参考文献：

Answer 2

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

检查我的jsfiddle

Answer 3

还有一种使用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

<强>参考文献：

免责声明：目前各浏览器并未完全支持CSS3，此解决方案假设我们的目标是在Web开发中向前推进以定位现代浏览器。

Answer 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。希望这有助于/有效！

在img标签上叠加图形边框

4 个答案: