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;
}

第3个opac背景不起作用（CSS3中具有不透明度的多个背景）

1 个答案: