Sobrepor div com imagem

[AndréAraujo 2]

Olá pessoal, eu tenho um slide onde preciso adicionar uma

imagem que fique sempre sobreposta as imagens do slide e se repita

com "repeat fixed", mais não estou obtendo sucesso.

 

Meu código CSS:

#featured {
height: 328px; 
width: 665px; 
overflow: hidden;
margin:0 0 0 10px;
float:left;
}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
#featured img{
width:665px !important;
height:328px !important;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://pause.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active, 
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 18px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://seta/right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://seta/left.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 999;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: $(second.color); 
background-position: -7px 0;
}

Biblioteca:

<script src='http://jquery.min.js' type='text/javascript'/>

Script:

<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 7000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>

 

Meu código HTML:

<div id='featured'>
<a href="http://link1"><img src="https://limagem1.jpg"/></a><span class='orbit-caption'><b>Descrição</b></span>
<a href="http://link2"><img src="https://limagem2.jpg"/></a><span class='orbit-caption'><b>Descrição</b></span>
<a href="http://link3"><img src="https://limagem3.jpg"/></a><span class='orbit-caption'><b>Descrição</b></span>
<a href="http://link4"><img src="https://limagem4.jpg"/></a><span class='orbit-caption'><b>Descrição</b></span>
</div>

Agradeço a atenção!

[wilnet 92]

Olá André blza!

 

Não sei se é a melhor forma, mas isso ajuda.

 

CSS

<style> 
div {position: relative;}
div#quadro_imagem {width:665px; height:328px; position: absolute; padding: 0px; margin: 0 auto; z-index: 2;}
div#imagem_fundo {width:665px; height: 328px; }

img#imagem {
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
}
</style>

HTML

<div id="quadro_imagem">
<div id="imagem_fundo"> 
<img src="https://limagem1.jpg" />
<img id="imagem" src="imagem que sobrepoe.png" name="imagem" />
</div>
</div>

Agora é só adaptar para sua necessidade.

 

Espero ter ajuda.

 

vlw

[AndréAraujo 2]

Olá wilnet, o maior desafio dessa tarefa é fazer com que o imagem que se sobrepõe fique abaixo do link, e se for adicionada outra imagem dentro do link o script intende ela como mais uma imagem do slide.

 

Mesmo assim obrigado por seu interesse em ajudar.