我希望能够在网站上的所有图像上覆盖图形边框,而无需在 Photoshop 中手动应用它。我使用的边框是一个粗糙的“苦恼”图形,因此无法通过使用 css 边框来实现。
我最初的想法是使用 javascript 将包含边框图形的周围 div(或 div)动态添加到所有 img 标签,尽管我不太确定如何执行此操作。
我希望能够在网站上的所有图像上覆盖图形边框,而无需在 Photoshop 中手动应用它。我使用的边框是一个粗糙的“苦恼”图形,因此无法通过使用 css 边框来实现。
我最初的想法是使用 javascript 将包含边框图形的周围 div(或 div)动态添加到所有 img 标签,尽管我不太确定如何执行此操作。
我建议使用以下 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]);
}
参考:
有一个使用 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;
}
<strong> jsFiddle
参考:
免责声明:CSS3 目前不完全支持跨浏览器,此解决方案假定我们的目标是在 Web 开发中向前发展以针对现代浏览器。
您可以将边框设置为背景图像并将图像放入其中并添加一些边距
检查我的jsfiddle
你应该可以用 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。希望这会有所帮助/有效!