Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE


<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

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados