Hola a todos !! Paso a dejar el ejercicio de la clase CU01031D del curso pdf de programación web CSS. Desde ya muchas gracias por la atención. Un saludo,
Luis
Aclaración: Para calcular las posiciones "absolutas"(en px) desde donde colocar la imagen de fondo en los div 3 y 4, realicé las siguientes operaciones:
div 3) La imágen es de 310x310 px.
Cálculo de la posición horizontal es :
margin(40px)+(width del div-ancho de la imagen)/2=
40px+(400px-310px)/2=85px
div 4) La imágen es de 128x128 px.
Cálculo de la posición horizontal es :
margin(40px)+(width del div-ancho de la imagen)/2=
40px+(400px-128px)/2=176px
Cálculo de la posición vertical es :
4 x margin(40px) + 3 x div(400px)+(height del div-alto de la imagen)/2=
160px+1200px+(400px-128px)/2=1496px
EJERCICIO
Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones). Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Página HTML
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio CU01031D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div id="div1">
DIV 1
</div>
<div id="div2">
DIV 2
</div>
<div id="div3">
DIV 3
</div>
<div id="div4">
DIV 4
</div>
</body>
</html>Hoja de estilo: estilos.css
/* Curso CSS estilos aprenderaprogramar.com*/
*{margin:0;
}
div {width:400px; height:400px;
margin:40px;
padding:40px;
}
#div1{
border-width:10px;
border-style:dotted;
background-repeat:no-repeat;
background-position:50%,50%;
background-color:#FF5733;
background-image:url("https://i.imgur.com/A0HaQVA.jpg?1");
}
#div2{
border-width:20px;
border-style:double;
background-repeat:no-repeat;
background-position:center,center;
background-color:#33E3FF;
background-image:url("https://i.imgur.com/HsbDBxY.png?1");
}
#div3{
border-width:30px;
border-style:dashed;
background-repeat:no-repeat;
background-position:85px,50%;
background-color:#F6FF33;
background-image: url("https://i.imgur.com/hqkYtoG.jpg?7");
}
#div4{
border-width:40px;
border-style:groove;
background-repeat:no-repeat;
background-position:176px,1496px;
background-color:#93FF33;
background-image: url("https://i.imgur.com/p8yLvlY.png");
}
Tema: CSS background-position, background-attachment, clip Shorthand fondo CU01031D (Leído 2500 veces)
RSS -
WAP2