← WordPress

imagem com titulo por cima

Lida 2059 vezes

Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

boas,
esta duvida é para um theme wordpress mas se preferirem mudem-na para a secção de programação.


eu queria colocar 4 imagens de 4 posts diferentes em destaque e com o título do post a cobrir a imagem, no fundo do texto teria uma imagem semi-transparente, mas não o consigo fazer em css, já tentei de várias formas e não consigo, alguém me ajuda?

o efeito desejado era este
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Código: [Seleccione]
<div style="background: url('urlDaImagem.jpg') no-repeat center; width: 300px; height: 300px;">
    <div style="position: relative; width: auto; height: 50px; top: 250px; background: #fff;">
        O texto fica aqui, bla bla bla, wiskas saketas. bla bla bla bla bla bla yoo. :D
    </div>
</div>

Vê se é isso :)
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

não está a funcionar bem como quero

tenho isto


php
Código: [Seleccione]
<div id="dstk2">
<div id="img-dstk">
<img src="imagens/img_dtk_exemplo.png">
</div>
<div id="txt-dstk">
David Fonseca lan&ccedil;a m&uacute;sicas exclusivas para ...
</div>
                        <div id="img-dstk">
<img src="imagens/img_dtk_exemplo.png">
</div>
<div id="txt-dstk">
David Fonseca lan&ccedil;a m&uacute;sicas exclusivas para ...
</div>
                        <div id="img-dstk">
<img src="imagens/img_dtk_exemplo.png">
</div>
<div id="txt-dstk">
David Fonseca lan&ccedil;a m&uacute;sicas exclusivas para ...
</div>
                        <div id="img-dstk">
<img src="imagens/img_dtk_exemplo.png">
</div>
<div id="txt-dstk">
David Fonseca lan&ccedil;a m&uacute;sicas exclusivas para ...
</div>
</div>
css
Código: [Seleccione]
#dstk2 {
float:left;
padding-left:10px;
width:630px;
height:130px;
}

#img-dstk {
width:150px;
height:120px;
float:left;
        }

#txt-dstk {
position:relative;
width:150px;
height:30px;
top:90px;
background-image:url(imagens/f_laranja.png);
font-size:10px;
font-stretch:condensed;
font-weight:bold;
color:#FFFFFF;
        float:left;
}

o resultado está a ser este
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

ninguem consegue resolver isto???
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

O codigo que te fiz é o que pediste. :S
Offline

frsantos 
Membro
Mensagens 1458 Gostos 0
Troféus totais: 35
Trófeus: (Ver todos)
Linux User Mobile User Apple User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter

mas o resultado está a ser o que ves na imagem, ou eu copiei algo mal para a folha de estilos?

Páginas: 1

Posts relacionados

Desenvolvimento

banner rotation por cima de imagem

m
miguelcardoso

SMF

Título do tópico + título do forum

g
goodsound

Social Media

Cópias e ainda watermark por cima - épico

AntonioC