陰影堅持到現場的兩側

我願把陰影到我的網站的兩邊，你可以在這裏看到 - http://www.oztrik.sk/wp-content/uploads/2012/01/trik.jpg 陰影堅持到現場的兩側

我想過把他們分成左，右divs與width:100%;和height:auto;作爲背景圖片，repeat-y。

#left { background:url('../img/shadow_left.png') left center repeat-y; width:100%;  height:auto; float:left; } 
#right { background:url('../img/shadow_right.png') right center repeat-y; width:100%; height:auto; float:right; }

問題是，當內容div的width比瀏覽器窗口大小越大，陰影撐粘在窗口的右側，而不是頁面的右側。當我把它放到auto時，問題又出現了。

另外，當頁面縮小時，陰影以內容結尾結束。

任何想法如何解決它？謝謝！

來源

2012-01-06 michaliv

是否需要'浮動'？如果你刪除它們會發生什麼？看起來你有兩種適當的機制來適當地定位陰影（全寬與背景對齊和浮點）。請包括HTML。 – cheeken 2012-01-06 20:16:50

我會建議在創建CSS陰影，而不是圖像like in this Fiddle：

body { 
    box-shadow: inset 100px 0 100px -100px #000, 
       inset -100px 0 100px -100px #000; 
}

對於解決您的具體的實施幫助，請提供直播網站或a jsFiddle說明該問題。

編輯

爲了讓您實現工作，試試這個：

#left { 
    background: url('../img/shadow_left.png') left center repeat-y; 
    left: 0; 
    position: fixed; 
    top: 0; 
    height: 100%; 
    width: 100px; 
    z-index: -1; 
} 
#right { 
    background: url('../img/shadow_right.png') right center repeat-y; 
    position: fixed; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 100px; 
    z-index: -1; 
} 
#center { 
    position: relative; 
    z-index: 1; 
}

注： - 對於要正確呈現的z-index，該元素必須有一個聲明position屬性。 - 您還應該將#left和#right的width更改爲影子資產的寬度。 - 製作#left,#right,#center#wrapper

來源

2012-01-06 20:15:22

+1對於沒有圖像:) – danferth 2012-01-06 20:21:33

Thx，這是一個很好的解決方案。不過，我想找到一個沒有CSS3的解決方案。該網站還沒有生活，我上傳了第一個測試版本 - http://www.oztrik.sk/test/ – michaliv 2012-01-06 20:30:28

'box-shadow' [主要渲染引擎完全支持]（http：// en。 wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)#Properties），因此刪除了供應商前綴。但是，如果您想使用圖片，請參閱我的編輯以獲取可能的解決方案。 – 2012-01-06 20:41:09

陰影堅持到現場的兩側

回答

相關問題