12

複数の div にわたって単一の背景画像を「タイル」または「ウィンドウ」する簡単な方法があるかどうか疑問に思っていました。打ち抜かれた窓のような外観を作りたいと思っています。

これらのボックスを動的に追加したいことに注意してください。最大で 16 個ですが、9 個でも構いません。

私はここにフィドルを持っています：フィドルへのリンク

私がやりたいのは、背景画像が表示される代わりに、白になることです..そして、divが白である代わりに、背景画像のそのセクションが含まれています. これがあまり良い説明でなくて申し訳ありませんが、基本的には白を背景と入れ替えたいと思っています。

次のようなもの：

<div id="blocks">
  <div class="block" style=" background: some-section-of-image ;"></div>
  <div class="block" style=" background: some-section-of-image2;"></div>
  <div class="block" style=" background: some-section-of-image3;"></div>
  <div class="block" style=" background: some-section-of-image4;"></div>
</div>

できるだけ少ないjQueryでこれを行いたいのですが...おそらくそれは実現不可能です。

私はいくつかの設定をいじりました

opacity:0.0;

ブロックだけで、画像を他の場所に表示しない方法がわかりません。ありがとう！

4

4 に答える 4

4

ほぼ 100% の状態になりました。自由に（誰でも）回答を編集してください。

CSS

#blocks {
    width:100%;
    height:100px;
}
.block {
    float: left;
    overflow: hidden;
    margin: 2%;
    width: 20%;
    height: 100%;
    background: transparent url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat top left;
}

jQuery (JS)

$(function () {
    var posX = 0;
    var posY = 0;
    var i = 0;

    $(".block").each(function (ind, el) {
        $(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");

        posX += 20;
        i++;

        if (i == 4) {
            i = 0;
            posX = 0;
            posY += 25;
        }
    });
});

デモ (改善予定): http://jsfiddle.net/bzCNb/33/

于 2013-09-12T18:18:28.297 に答える
0

ページの代わりにブロックに背景を配置し、固定アタッチメントと左上の配置を試してみてください。残念ながら、このオプションを使用すると、ページがスクロールすると背景が固定されて表示されます。

.block{
    float: left;
    overflow: hidden;
    margin: 2%;
    width: 20%;
    height: 100%;
    background-image: url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
}

http://jsfiddle.net/bzCNb/28/

于 2013-09-12T17:49:31.093 に答える