如何叠加图像

Question

我正在尝试将图像叠加在两个 div 列上 - 我尝试使用 Z-index。并尽可能多地使用我所知道的定位属性。

我做错了什么。两个框后面的三角形，以及您将在 JSFiddle 中看到的其余文本，应该位于 radial-gradient[ed] 框的顶部。

#background-wrapper {
    margin: 0 auto;
    margin-top: 25px;
    width: 1024px;
}


body {
background-color: #666;

}

body {
background-image: url("images/background-01.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

.container-01 {
position: absolute;
margin: 50px 50px;
width: 380px;
height: 160px;
opacity: .65;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */
  background: -o-radial-gradient(circle,  black, grey, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  black, grey, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  black, grey, white); /* Standard syntax */
z-index: 1

}
    

}

#trident {
clear: both;
left: 50px;
z-index: 2;
}


.container-01-box {
position: relative;
margin: 60px 60px;
width: 360px;
height: 140px;
    
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */
  background: -o-radial-gradient(circle,  black, grey, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  black, grey, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  black, grey, white); /* Standard syntax */

z-index: 1
}

<title>UNAWAKENED.NET - Welcome!</title>

    <link rel="stylesheet" href="index.css">
    


</head>




<body>
<section id="background-wrapper">

    
    <header>_</header>
<div class="container-01"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Penrose-dreieck.svg/526px-Penrose-dreieck.svg.png" id="trident" alt="Triangle" width="100"><h1 id="top-box">Featured Dream</h1></div>
    <div class="container-01-box"><h1 id="name-of-dream">"The ships from Nova"</h1></div>
</body>

如果有人好奇的话，这是给 unawakened.net 的。找到答案的请顺便说明逻辑！

提前致谢。

Answer 1

如果你想让图片保持在顶部，那么你必须为 IMG 保持单独的 div 并保持 Z-index 大于其他两个。请尝试，或者您能否分享它的外观图像。 :)

Answer 2

#background-wrapper {
    margin: 0 auto;
    margin-top: 25px;
    width: 1024px;
}


body {
background-color: #666;

}

body {
background-image: url("images/background-01.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

.container-01 {
position: absolute;
margin: 50px 50px;
width: 380px;
height: 160px;
opacity: .65;
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */
  background: -o-radial-gradient(circle,  black, grey, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  black, grey, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  black, grey, white); /* Standard syntax */
z-index: 2

}
    

}

#trident {
clear: both;
left: 50px;
z-index: 2;
}


.container-01-box {
position: relative;
margin: 60px 60px;
width: 360px;
height: 140px;
    
background: #555; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, black, grey, white); /* Safari */
  background: -o-radial-gradient(circle,  black, grey, white); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle,  black, grey, white); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle,  black, grey, white); /* Standard syntax */

z-index: 1
}

<title>UNAWAKENED.NET - Welcome!</title>

    <link rel="stylesheet" href="index.css">
    


</head>




<body>
<section id="background-wrapper">

    
    <header>_</header>
<div class="container-01"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Penrose-dreieck.svg/526px-Penrose-dreieck.svg.png" id="trident" alt="Triangle" width="100"><h1 id="top-box">Featured Dream</h1></div>
    <div class="container-01-box"><h1 id="name-of-dream">"The ships from Nova"</h1></div>
</body>

如何叠加图像

How to overlay an image

html

css

z-index