0

Web ページにビネットを重ねたい。ビネットはページの可視部分 (つまり、ウィンドウ) に固定され、ページはその下で上下にスクロールします。私が試みている方法よりも良い方法があるに違いないと思います（これは機能していません）。

私が試したのは、ビネットの 4 つのコーナーを「固定」として配置され、z インデックスが増加した 4 つの個別の画像として持つことです。それはうまくいきます。しかし、コーナー画像間のギャップを埋めたいです。コーナー間で繰り返すことを望んでいたビネットの適切な領域のいくつかの薄いスライスを作成しました。しかし、ギャップを埋めることができるように div を配置することはできないようです。現時点では、ビネットの 4 つのコーナー部分があり、コーナーの間には何もありません。

これは、div を整理しようとするコードの一部です。div の「左」と「右」のクラスはそれぞれフロートされます。

<body onload="sizeDivs()" onresize="sizeDivs()">
    <div class="left">
        <div class="vignette"><img id="vignette_topleft" src="code/images/vignette_topleft.png"/></div>
        <div class="vignette_side" id="vignette_left"></div>
        <div class="vignette"><img id="vignette_bottomleft" src="code/images/vignette_bottomleft.png"/></div>
    </div>
    <div class="vignette_top-bottom" id="vignette_top"></div>
    <div class="right">
        <div class="vignette"><img id="vignette_topright" src="code/images/vignette_topright.png"/></div>
        <div class="vignette_side" id="vignette_right"></div>
        <div class="vignette"><img id="vignette_bottomright" src="code/images/vignette_bottomright.png"/></div>
    </div>

イベントは、必要な塗りつぶし div のサイズを決定し、高さを設定する JavaScript 関数です。

上、左、右の塗りつぶしの CSS は次のとおりです。

.vignette {
        z-index: 5;
    }

    .vignette_top-bottom {
        background-repeat: repeat-x;
        z-index: 5;
        margin: 0 auto;
    }

    #vignette_topleft {
        position: fixed;
        top: 0;
        left: 0;
    }

    #vignette_bottomleft {
        position: fixed;
        bottom: 0;
        left: 0;
    }

    #vignette_topright {
        position: fixed;
        top: 0;
        right: 0;
    }

    #vignette_bottomright {
        position: fixed;
        bottom: 0;
        right: 0;
    }

    #vignette_left {
        background-image: url("code/images/vignette_left.png");
        background-repeat: repeat-y;
        position: relative;
        left: 0px;
        top: 0px;
        z-index: 10;
    }

    #vignette_right {
        background-image: url("code/images/vignette_rightred.png");
        background-repeat: repeat-y;
        position: relative;
        right: 0px;
        top: 0px;
        z-index: 10;
    }

    #vignette_top {
        background-image: url("code/images/vignette_top.png");
        position: relative;
    }

そこにはさまざまな配置の組み合わせが表示されますが、フィル ビットの配置方法に大きな違いはないようです。

これをどのように機能させることができるかについてのアイデアはありますか?

4

2 に答える 2

3

これがパフォーマンスにとってどれほど良いかはわかりませんが、http://codepen.io/hwg/pen/onapH

html:before {
 position:fixed;
 width:100%;
 height:100%;
 content:"";
 box-shadow: 0px 0px 220px black inset;

 pointer-events:none;
 z-index:1000;

 }

余分なマークアップはありません！

(これは基本的にフルページの CSS3 ボックスの影です)

于 2013-06-20T14:56:17.733 に答える
2 
.vignette {
    position: fixed;
    -moz-box-shadow: inset 0 0 10em #000;  
    -webkit-box-shadow: inset 0 0 10em #000;   
    box-shadow: inset 0 0 10em #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
于 2013-06-20T14:54:23.510 に答える