0
Я пытаюсь наложить изображение на два div col. - Я попытался использовать Z-индекс. И играл с такими же позиционирующими свойствами, которые я знаю.Как наложить изображение
Что я делаю неправильно. Треугольник за двумя полями, а также остальная часть текста, который вы увидите в 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, если кому-то интересно. Пожалуйста, объясните логику, если вы нашли ответ, кстати!
Заранее спасибо.
р у ищет, как это? http://jsfiddle.net/sureshponnukalai/e73ys781/ –
почти. Я проверю ваш код. Но я хочу, чтобы элементы были выше ящиков полностью. Без смешивания. Загляните в него, что вы сделали? :) – Sidhartha
Я только что изменил 'z-index: 1' на' z-index: 100' для класса 'container-01' –