透明背景與身體::通過屏幕尺寸

我一直在使用該代碼在我的身上，讓一個完整的背景，一些MI-透明白色背景上它之後的限制：透明背景與身體::通過屏幕尺寸

body { 
     background: url('../images/bg.jpg') no-repeat center center fixed; 
    padding-top: 50px; 
} 

body::after { 
    content: ""; 
    background: white; 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

問題是白色背景不會低於屏幕尺寸as you can see here。任何想法如何解決這個問題？

來源

2015-11-12 Cachwir

請發表您完成的代碼，而不是圖像。 – Alex

，只取決於身體的大小。你想要背景多久？內容更長但仍爲空？順便說一句，有人拼寫「汗」錯 – coozin

你試過'位置：固定'而不是'絕對'？ – Quantastical

這是因爲body::after是不固定的，改變這樣的CSS：

body::after { 
    content: ""; 
    background: white; 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: fixed; 
    z-index: -1; 
}

這裏是一個example黑色背景

來源

2015-11-12 15:23:22

絕對完美。我想知道爲什麼我以前沒有考慮過它。非常感謝！ – Cachwir

製作::after元件position: fixed。

Fiddle

body { 
 
     background: url('../images/bg.jpg') no-repeat center center fixed; 
 
    padding-top: 50px; 
 
} 
 

 
body::after { 
 
    content: ""; 
 
    background: red; 
 
    opacity: 0.5; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: fixed; 
 
    z-index: -1; 
 
} 
 

 
div { 
 
    height: 800px; 
 
}

<div>div</div>

來源

2015-11-12 15:21:54 justinw

除了使用:: before或:: after僞元素之外，您可以使用css multple backgrounds。

從這個網站生成的base64：http://px64.net/
應用背景的主體元素。

#foo { 
 

 
    width: 400px; 
 
    height: 150px; 
 
    visibility: visible; 
 

 
} 
 

 
#foo { 
 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYPhfDwACggF/yWU3jgAAAABJRU5ErkJggg==) repeat, url(http://www.openkorat.com/wp-content/uploads/2015/08/extra-bg-green.jpg) no-repeat; 
 
    background-size: auto, cover; 
 
}

<div id="foo"></div>

來源

2015-11-12 15:27:49 Hitmands

透明背景與身體::通過屏幕尺寸

回答

相關問題