Cómo colocar texto sobre una imagen en css

104

¿Cómo centrar un texto sobre una imagen en css?Cómo colocar texto sobre una imagen en css

<div class="image"> 
    <img src="sample.png"/> 
    <div class="text"> 
     <h2>Some text</h2> 
    </div> 
</div>

quiero hacer algo como la de abajo pero estoy teniendo dificultades, aquí está mi css actual

<style> 
.image { 
    position: relative; 
} 

h2 { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    margin: 0 auto; 
    width: 300px; 
    height: 50px; 
} 
</style>

enter image description here

Cuando uso Imagen de fondo no consigo ningún salida de html2pdf:

<style> 
#image_container{ 
    width: 1000px; 
    height: 700px; 
    background-image:url('switch.png'); 
} 
</style> 
<a href="prints.php">Print</a> 
<?php ob_start(); ?> 
<div id="image_container"></div> 
<?php 
$_SESSION['sess'] = ob_get_contents(); 
ob_flush(); 
?>

Aquí está prints.php:

<?php require_once('html2pdf/html2pdf.class.php'); ?> 
<?php 
$html2pdf = new HTML2PDF('L', 'A4', 'en'); 
$html2pdf->writeHTML($_SESSION['sess']); 
$html2pdf->Output('random.pdf'); 
?>

Fuente

2012-01-03 Wern Ancheta

158

¿Qué tal algo como esto: http://jsfiddle.net/EgLKV/3/

Su hecho mediante el uso de position:absolute y z-index para colocar el texto sobre la imagen.

#container { 
 
    height: 400px; 
 
    width: 400px; 
 
    position: relative; 
 
} 
 
#image { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    left: 150px; 
 
    top: 350px; 
 
}

<div id="container"> 
 
    <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" /> 
 
    <p id="text"> 
 
    Hello World! 
 
    </p> 
 
</div>

Fuente

2012-01-03 07:48:43 xbonez

+12

Puede evitar el z-index – FooBar

esta publicación ya no funciona? – danielad

@danielad: funcionó bien hasta que editó la respuesta. He retrocedido tus ediciones. – xbonez

Por qué no establecer sample.png imagen de fondo de text o h2 clase css? Esto dará efecto a medida que haya escrito sobre una imagen.

Fuente

2012-01-03 07:03:00

¿Qué pasa si la imagen tiene que ser una parte semántica del documento? – animuson

@animuson: No creo que este sea el caso aquí. : \ –

Estoy usando html2pdf para generar un pdf y si uso background-image no obtengo nada. –

como señala Harry Joy, configure la imagen como el fondo del div y luego, si solo tiene una línea de texto, puede establecer que la altura de línea del texto sea la misma que la altura del div y esto colocará tu texto en el centro de la div.

Si tiene más de una línea, querrá configurar la celda de la tabla y la alineación vertical en el centro.

Fuente

2012-01-03 07:05:09

Estoy usando html2pdf para crear un pdf a partir de esos. No veo ninguna imagen si uso una imagen de fondo. Por favor mira mi edición. –

Lo siento, no tengo idea de qué es html2pdf. –

Para un diseño de respuesta es bueno utilizar un recipiente que tiene una disposición relativa y el contenido (colocado en el recipiente) que tiene diseño fijo como.

Estilos

CSS:

/*Centering element in a base container*/ 

.contianer-relative{ 
    position: relative; 
} 

.content-center-text-absolute{ 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    height: 0%; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 51; 
}

código HTML:

<!-- Have used ionic classes --> 
<div class="row"> 
    <div class="col remove-padding contianer-relative"><!-- container with position relative --> 
     <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background --> 
     <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed --> 
    </div> 
    <div class="col remove-padding contianer-relative"><!-- container with position relative --> 
     <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background --> 
     <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed --> 
    </div>  
</div>

Para IÓNICA de diseño de cuadrícula, elementos de rejilla uniformemente espaciados y las clases utilizadas en por encima de HTML, por favor refiérase - Grid: Evenly Spaced Columns. Espero que te ayude ... :)

Fuente

2016-03-01 12:09:05 Kailas

Este es otro método para trabajar con tamaños Responsive. Mantendrá su texto centrado y mantendrá su posición dentro de su padre. Si no lo quiere centrado, entonces es aún más fácil, solo trabaje con los parámetros absolute. Tenga en cuenta que el contenedor principal está usando display: inline-block. Hay muchas otras maneras de hacerlo, dependiendo de en qué esté trabajando.

Basa en Centering the Unknown

Working codepen example here

HTML

<div class="containerBox"> 
    <div class="text-box"> 
     <h4>Your Text is responsive and centered</h4> 
    </div> 
    <img class="img-responsive" src="http://placehold.it/900x100"/> 
</div>

CSS

.containerBox { 
    position: relative; 
    display: inline-block; 
} 
.text-box { 
    position: absolute;  
    height: 100%; 
    text-align: center;  
    width: 100%; 
} 
.text-box:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
h4 { 
    display: inline-block; 
    font-size: 20px; /*or whatever you want*/ 
    color: #FFF; 
} 
img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

Fuente

2016-07-07 19:57:01

Esta solución es ideal para aquellos momentos en los que no puede especificar un alto o ancho de conjunto. – Yazmin

partir de 2017 esto es más receptivo y funcionó para mí. Esto es para poner texto dentro vs vs, como una insignia. en lugar del número 8, tenía una variable para extraer datos de una base de datos.

este código se inició con Kailas 's contestar por encima

https://jsfiddle.net/jim54729/memmu2wb/3/

Mi HTML

<div class="containerBox"> 
    <img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png"> 
    <div class='text-box'> 
    <p class='dataNumber'> 8 </p> 
    </div> 
</div>

y mi css:

.containerBox { 
    position: relative; 
    display: inline-block; 
} 

.text-box { 
    position: absolute; 
    height: 30%; 
    text-align: center; 
    width: 100%; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    font-size: 30px; 
} 

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: 120px; 
    margin: auto; 
    padding: auto; 
} 

.dataNumber { 
    margin-top: auto; 
}

Fuente

2017-03-02 17:57:09

Una forma pequeña y corta de hacer el mismo

HTML

<div class="image"> 
    <p> 
     <h3>Heading 3</h3> 
     <h5>Heading 5</h5> 
    </p> 
</div>

CSS

.image { 
     position: relative; 
     margin-bottom: 20px; 
     width: 100%; 
     height: 300px; 
     color: white; 
     background: url('../../Images/myImg.jpg') no-repeat; 
     background-size: 250px 250px; 
    }

Fuente

2017-04-29 05:49:58

Cómo colocar texto sobre una imagen en css

Respuesta

Cuestiones relacionadas