<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.image-container {
position: relative; /* Necesario para posicionar la imagen sobrepuesta */
width: 300px; /* Ancho de la imagen de fondo */
height: 200px; /* Alto de la imagen de fondo */
}
.background-image {
width: 100%; /* Para que la imagen de fondo ocupe todo el contenedor */
height: auto; /* Mantiene la proporción */
}
.overlay-image {
position: absolute; /* Posiciona la imagen sobre la otra */
top: 191px; /* Ajusta la posición desde la parte de arriba */
left: 620px; /* Ajusta la posición desde la izquierda */
width: 100px; /* Ancho de la imagen sobrepuesta */
height: auto; /* Mantiene la proporción */
opacity: 0.8; /* Opcional: hace que la imagen sobrepuesta sea un poco transparente */
}
style>
head>
<body>
<imgsrc="https://cdn.pixabay.com/photo/2023/12/04/17/53/yoga-8429980_1280.png"alt="meditation"class="background-image">
<imgsrc="https://cdn.pixabay.com/photo/2016/03/25/05/55/purple-1278283_1280.png"alt="purple"class="overlay-image">
body>
html>```
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario