css - 第三个 opac 背景不起作用(CSS3 中具有不透明度的多个背景)

Question

我不明白为什么我的第三个背景不起作用？

我试过的是:http://jsbin.com/yopodusu/1/edit , #page::after 后台不工作。

body {
    line-height: 1;
    overflow-y: scroll;
    background: transparent url(http://i.imgur.com/SwFFw1i.gif) repeat top left;
}
body::after {
    content: "";
    background: url(http://i.imgur.com/QOSseW6.jpg);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -2;
    opacity: .150;
}
#page::after {
    content: "";
    background: url(http://www.zordor.com/w/1920x1200/6098.jpg) no-repeat right top;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    opacity: .150;
    background-size: 35%;
}

我做错了什么？

问候

Answer 1

你有这个属性覆盖元素的可见性:

.clearfix:before,.clearfix:after { 
    content:"\0020"; 
    display:block; 
    height:0; 
    visibility:hidden;  
}

将 visibility : visible 添加到您的 #page:after

还有height : auto，或者设置一个特定的高度。

给出:

#page::after {
    content: "";
    background: url(http://www.zordor.com/w/1920x1200/6098.jpg) no-repeat right top;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    opacity: .150;
    background-size: 35%;
    visibility : visible;
    height: auto;
}