Nuestro team de especialistas pasados muchos días de trabajo y de recopilar de información, hallamos los datos necesarios, nuestro deseo es que todo este artículo sea de gran utilidad en tu trabajo.
Solución:
¿Qué tal algo como esto: http://jsfiddle.net/EgLKV/3/
Se hace usando 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;
Hello World!
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 el absolute parámetros Tenga en cuenta que el contenedor principal está utilizando display: inline-block. Hay muchas otras formas de hacer esto, dependiendo de lo que estés trabajando.
Basado en Centrar lo desconocido
Ejemplo de código abierto de trabajo aquí
HTML
Your Text is responsive and centered
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;
¿Por qué no establecer sample.png como imagen de fondo de text o h2 ¿clase css? Esto dará efecto como si hubieras escrito sobre una imagen.
Si eres capaz, tienes la libertad de dejar un ensayo acerca de qué te ha parecido este post.