Question

我正在设计一个网站，我想要关于我＆＃34;关于我＆＃34;仅显示在第二张图像上，而不是第一张图像上。如何布置z索引以实现此效果？我以前见过这件事，并认为这很酷。

目前我有：

z-index:100; /*overlay*/
z-index:10; /*splash*/
z-index:0; /*break*/

我做错了什么？

的jsfiddle： http://jsfiddle.net/kxanfpum/5/

Answer 1

试试这个solution，希望这会有所帮助：

#break {
    height:400px;
    background-image: url("http://img.inspiringwallpapers.net/wp-content/uploads/2013/10/new-york-skyline-at-sunset-from-high-above.jpg");
    background-attachment: fixed;
    position: relative;
    text-align: center;
    color:#fff;
    z-index: 11;
}
#break h1 {
        top:0px;
        left: 0px;
        font-size: 99.5px;
        position: absolute;
    z-index: 0;
}

Answer 2

试试这个。，您使用position:fixed作为#break h1，因此我将其修改为绝对

#break h1 {
        top:0px;
        left: 0px;
        font-size: 99.5px;
        position: absolute;/*changed fixed to absolute*/
}

我希望对你有用。

一个人如何布置z-index如此？

2 个答案: