Siguiendo con el anterior post os traigo otro método, mucho más sencillo de implementar y que podeis jugar con la opacidad de la imagen en la que estais insertando el texto.
Este nuevo metodo entra en juego el valor opacity y que podeis personalizar según la relevancia que le querais dar a la imagen (valores entre 0 y 1, 0,25; 0,50; 0,75), también podreis personalizar el ancho y altura de la capa conforme al tamaño del texto ajustandose a este, para que aparezca el texto dentro de la imagen hay que asignarles los mismos valors al witdh y al height que hay dentro de las etiquetas, podeis probar en la edición de html y con vista previa para ver los resultados de vuestros ajustes.
Sólo hay un pequeño inconveniente; para que puedas consegiur este efecto al redactar el post siempre deberás ajustar el texto y la imagen en edición html, en el tradicional modo de redactar los textos no se reflejan los cambios hasta que no modifiques los valores en el código ( witdh y height), tenlo en cuenta.
Este nuevo metodo entra en juego el valor opacity y que podeis personalizar según la relevancia que le querais dar a la imagen (valores entre 0 y 1, 0,25; 0,50; 0,75), también podreis personalizar el ancho y altura de la capa conforme al tamaño del texto ajustandose a este, para que aparezca el texto dentro de la imagen hay que asignarles los mismos valors al witdh y al height que hay dentro de las etiquetas, podeis probar en la edición de html y con vista previa para ver los resultados de vuestros ajustes.
Código que se va a utilizar:
Opacidad a 0.50 y centrado
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel tellus eu mauris tempor fermentum. Nunc ipsum. Pellentesque sodales commodo lacus. Integer turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam suscipit, mauris at adipiscing interdum, erat tellus faucibus risus, sed lacinia odio libero nec leo. Suspendisse potenti. Quisque eu turpis et dui viverra aliquam. Fusce et metus. Vivamus sollicitudin urna sagittis lectus pretium ultricies. Integer rhoncus viverra pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero. Vivamus vehicula bibendum orci. Suspendisse sit amet mi eget lorem congue cursus.
Sólo hay un pequeño inconveniente; para que puedas consegiur este efecto al redactar el post siempre deberás ajustar el texto y la imagen en edición html, en el tradicional modo de redactar los textos no se reflejan los cambios hasta que no modifiques los valores en el código ( witdh y height), tenlo en cuenta.
0 comentarios:
Publicar un comentario