透明背景与身体::通过屏幕尺寸

我一直在使用该代码在我的身上，让一个完整的背景，一些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

透明背景与身体::通过屏幕尺寸

回答

相关问题