Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

salamandra

Escrever texto em cima da imagem

Por , em Desenvolvimento frontend

Recommended Posts

salamandra    0

salamandra
Postado

Olá, preciso colocar um ícone em cima de uma imagem, mas, para fins explicativos, vou usar texto sobre imagem.

 

Por exemplo, tenho a imagem 'img.jpg' e o texto 'X'. Preciso que o texto 'X' fique dentro da imagem, no canto inferior à direita. Como posso fazer isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Mardson    1

Paulo Mardson
Postado

Salamandra é muito simples segue a baixo o código comentado e o link em funcionamento:

 

http://paulomardson.com.br/imasters/posicionameto.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Imagem sobre texto</title>
<style type="text/css">
#foto{
	/*Definimos a altura e largura para criar 
	uma box, criando limites para os parametros 
	do icone que irá flutoar*/
	width:		600px;
	height:		500px;
	/*O position RELATIVE faz com que o posicionamento 
	do ICO seja dentro dos limites que definimos com a
	altura e largura*/
	position:	relative;
}
.icone1{
	/* Position ABSOLUTE define que o ICONE tera uma posição
	definida. dentro do nosso box	*/
	position:	absolute;
	/*O Right é a definição de que local nossa imagem se posicionará*/
	right:		20px;
	/*O Bottom é outro parametro de posicionameto como queremos que
	nosso icone se localize na base da imagem atribuimos um valor para ele.*/
	bottom:		20px;
}
.icone1{
	/* Position ABSOLUTE define que o ICONE tera uma posição
	definida. dentro do nosso box	*/
	position:	absolute;
	/*O Right é a definição de que local nossa imagem se posicionará*/
	right:		20px;
	/*O Bottom é outro parametro de posicionameto como queremos que
	nosso icone se localize na base da imagem atribuimos um valor para ele.*/
	bottom:		20px;
}

.icone2{
	position:	absolute;
	right:		20px;
	/*POSICIONANDO NO TOPO*/
	top:		20px;
}

.icone3{
	position:	absolute;
	/*POSICIONANDO A ESQUERDA*/
	left:		20px;
	/*POSICIONANDO NO TOPO*/
	top:		20px;
}
</style>
</head>

<body>
	<h1>POSICIONAMENTE 1</h1>
	<div id="foto">
    	<img src="http://s2.glbimg.com/x0zg74yEDNRa71IXi8-eRf1crJY=/top/s.glbimg.com/jo/eg/f/original/2012/12/25/perola.jpg" width="600" height="500" />
        <img src="http://emdestaque.net/facilonline/wp-content/uploads/2011/06/selo.png" width="128" height="128" class="icone1" />
    </div>
    
    <h1>POSICIONAMENTE 2</h1>
	<div id="foto">
    	<img src="http://s2.glbimg.com/x0zg74yEDNRa71IXi8-eRf1crJY=/top/s.glbimg.com/jo/eg/f/original/2012/12/25/perola.jpg" width="600" height="500" />
        <img src="http://emdestaque.net/facilonline/wp-content/uploads/2011/06/selo.png" width="128" height="128" class="icone2" />
    </div>
    
    <h1>POSICIONAMENTE 3</h1>
	<div id="foto">
    	<img src="http://s2.glbimg.com/x0zg74yEDNRa71IXi8-eRf1crJY=/top/s.glbimg.com/jo/eg/f/original/2012/12/25/perola.jpg" width="600" height="500" />
        <img src="http://emdestaque.net/facilonline/wp-content/uploads/2011/06/selo.png" width="128" height="128" class="icone3" />
    </div>
</body>
</html>

 

Espero ter ajudado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

salamandra    0

salamandra
Postado

As imagens estão vindo de um BD e só tem 2 tipos de tamanhos: '733x1100' ou '1650x1100'.

 

Aqui está um código mais simplificado para melhor entendimento:

 

 

 

.wrapper-img {
    float: left;
    margin-right: 20px;
    margin-top: 14px;
}


.cont-img {
    width:176px; 
    height:138px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
}


.center-img {
    cursor: pointer;
    border: 5px solid white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 7px #d5d5d5;
    -moz-box-shadow: 0px 1px 7px #d5d5d5;
    box-shadow: 0px 1px 7px #d5d5d5;
    max-width:166px !important;
    max-height:128px !important;
    position:relative;
}

 

 

 

<div class="wrapper-img">
    <div class="cont-img">
        <img src="<?php echo Router::url('/files/campaign/photo/3/05.jpg'); ?>" class="center-img" />
    </div>
</div>


Olha amigo, acabei posicionando as imagens que eu queria em baixo da imagem principal, acho que ficou melhor.

 

Mesmo assim, obrigado pela ajuda

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito