試圖在網頁上創建固定的小插圖

我想在網頁上疊加一個小插圖。小插圖將固定在頁面的可見部分（即窗口），頁面將在其下方上下滾動。我認爲必須有更好的方式來做到這一點，而不是我嘗試的方式（這是行不通的）。試圖在網頁上創建固定的小插圖

我試過的是將小插曲的4個角作爲4個獨立的圖像，它們被定位爲「固定」並且具有增加的z指數。這工作正常。但我想填補角落圖像之間的差距。我創建了一些我希望在角落之間重複的小插圖的適當區域的薄片。但我似乎無法安排我的div讓我填補空白。此刻，我有四個角落的小角落，角落之間沒有任何東西。

這裏是我嘗試和組織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; 
    }

你會看到在那裏定位的各種組合，但似乎並不有所作爲的多，我如何填充位置位。

關於如何使這項工作的任何想法？

來源

2013-06-20 user2505576

.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-20 14:54:23

是的！這樣可行。謝謝。你能告訴我如何使用這種方法使陰影變暗嗎？ – user2505576

你可以嘗試將它們堆疊在不同的尺寸 –

是的，這是有效的。非常感謝！ – user2505576

不知道有多好，這是對性能，但是：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-20 14:56:17

試圖在網頁上創建固定的小插圖

回答

相關問題