2015-12-15 110 views
0

我試圖將圖像覆蓋在兩個div列上 - 我嘗試使用Z-index。並玩弄我所知道的定位屬性。如何覆蓋圖像

我在做什麼錯。兩個盒子後面的三角形,以及您在JSFiddle中看到的其他文字,都應放在徑向漸變[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如果有人好奇。如果你找到答案,請解釋一下邏輯!

在此先感謝。

+1

[Rü這樣看?差不多都是http://jsfiddle.net/sureshponnukalai/e73ys781/ –

+0

。我要檢查你的代碼。但是我希望元素完全在盒子上面。沒有混合。 我看着它,你做了什麼? :) – Sidhartha

+1

我剛剛改變了'z-index:1'到'z-index:100'爲'container-01'類 –

回答

1

#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>

1

如果你想Image保持最佳狀態,那麼你必須爲IMG保留獨立的div,並保持Z-index大於其他兩個。請嘗試或可以分享圖片的外觀。 :)

+0

我花了一些時間才弄清楚使用z-index首次。謝謝 – Sidhartha