-1

Photoshopで手動で適用しなくても、サイト上のすべての画像にグラフィックの境界線をオーバーレイできるようにしたいと考えています。私が使用している境界線は、ラフな「苦しめられた」グラフィックであるため、css境界線を使用しても実現できません。

私の最初のアイデアは、javascriptを使用して、境界線のグラフィックを含む周囲のdivをすべてのimgタグに動的に追加することですが、これを行う方法はよくわかりません。

4

4 に答える 4

1

次の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フィドルデモ。

参照：

于 2012-05-16T10:11:03.533 に答える
0

境界線を背景画像として作成し、その中に画像を配置して余白を追加することができます

私のjsfiddleをチェックしてください

于 2012-05-16T10:21:40.923 に答える
0

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開発を進めることを目的としていることを前提としています。

于 2012-05-17T07:31:52.303 に答える
-1

あなたは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を自分のものに置き換えたりすることができます。これが役立つ/機能することを願っています！

于 2012-05-16T10:06:37.700 に答える