Las capacidades del lenguaje de marcado (HTML) y las hojas de estilo en cascada (CSS) le permiten colocar una imagen dentro de otra de muchas formas. Por supuesto, esto requiere algunas habilidades en el diseño de páginas web y debe elegir un método específico basado en el código existente. Sin embargo, en algunos casos, puede hacerlo sin editar el código fuente.
Instrucciones
Paso 1
Existe una forma de poner una imagen en otra sin ningún cambio en las páginas del sitio. Para hacer esto, basta con editar la imagen de fondo almacenada en el servidor; use cualquier editor de gráficos para colocar la imagen de primer plano en él. Si este método le funciona, comience por definir la ubicación de almacenamiento y el nombre del archivo de imagen de fondo. Esto se puede hacer buscándolo en el código fuente de la página o abriéndolo en una pestaña separada y mirando la ruta completa en la barra de direcciones del navegador.
Paso 2
Con el administrador de archivos del sistema de administración de contenido o el cliente FTP, descargue el archivo requerido en su computadora y ábralo en cualquier editor de gráficos, por ejemplo, en la aplicación Paint instalada con Windows.
Paso 3
Coloque la imagen de primer plano sobre el fondo; para ello, en Paint, debe seleccionar el elemento "Insertar desde" de la lista desplegable "Insertar" en la pestaña "Inicio" y encontrar el archivo requerido en el cuadro de diálogo que se abre. Luego ajuste la posición de la imagen insertada en el fondo existente (arrástrela con el mouse) y guarde el resultado (Ctrl + S).
Paso 4
Vuelva a cargar la imagen editada, sobrescribiendo la anterior. Esto completa el procedimiento.
Paso 5
El método descrito es inconveniente en el caso de que las imágenes insertadas deban cambiarse de vez en cuando. Luego, use las capacidades del lenguaje HTML; por ejemplo, haga que la imagen de fondo sea el fondo del elemento de página en el que se colocará la imagen de primer plano. Dicho elemento contenedor puede ser, digamos, una capa (div). Para convertir una gran parte de las imágenes en su fondo, debe usar la descripción de estilo, el atributo de estilo de la etiqueta div. Un contenedor vacío en código HTML podría verse así:
Entre paréntesis, indique la dirección y el nombre del archivo de imagen de fondo de su sitio.
Paso 6
Cree una etiqueta de imagen de primer plano (img), utilizando el mismo atributo de estilo para establecer la cantidad de relleno desde los bordes del contenedor de fondo. Por ejemplo:
Aquí, los atributos de ancho y alto establecen las dimensiones de la imagen, y los cuatro números después del relleno indican el relleno en píxeles desde los bordes del contenedor, comenzando en la parte superior (50) y más en el sentido de las agujas del reloj (60 - derecha, 70 - abajo, 80 - izquierda).
Paso 7
Coloque la etiqueta img en un contenedor:
Paso 8
Agregue las líneas creadas al código fuente de la página y luego, cambiando las sangrías, ajuste la posición de la imagen insertada contra el fondo de la imagen de fondo.
