Curso IT Fundamentos CSS 023_Imágenes, Fondo

Imágenes

Las imágenes son un tipo de medio muy importante en las páginas web. El uso adecuado de imágenes puede hacer que las páginas web sean coloridas y vivas, sin limitarse al texto frío.

Diseño de imágenes

El elemento img es un elemento en línea por defecto y tiene un margen predeterminado de 5px. Al establecerlo como elemento de bloque, solo se puede mostrar una imagen por línea. Al establecerlo como elemento en línea, se pueden mostrar varias imágenes en una línea. Para posicionar elementos de bloque se utiliza la propiedad margin, para posicionar elementos en línea se utiliza la propiedad text-align.

Ejemplo:

1
<img src="zhaojian1.jpg" alt="" >
2
<img src="zhaojian1.jpg" alt="" >
3
<img src="zhaojian1.jpg" alt="" >
4
<img style="display: block;" src="zhaojian1.jpg" alt="" >
5
<img style="display: block;" src="zhaojian1.jpg" alt="" >
6
<img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >

Efecto:

Transparencia de imagen

En CSS, puedes usar la propiedad opacity para establecer la transparencia de los elementos (incluidas las imágenes). Esta propiedad acepta un valor en el rango de 0 (completamente transparente) a 1 (completamente opaco).

Si solo quieres hacer transparente el fondo de la imagen sin afectar el contenido, puedes usar valores de color RGBA.

Ejemplo:

1
<img src="zhaojian1.jpg" alt="" >
2
<img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >

Efecto:

Bordes redondeados de imagen

En CSS, puedes usar la propiedad border-radius para agregar bordes redondeados a las imágenes. Esta propiedad se utiliza para establecer el grado de curvatura de las esquinas del borde de un elemento.

Ejemplo:

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- Establecer el radio del borde redondeado, se puede ajustar según sea necesario -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- Radio horizontal 20px, radio vertical 10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- Superior izquierda 10px, superior derecha 20px, inferior derecha 15px, inferior izquierda 5px -->

Efecto:

Sombra de imagen

En CSS, puedes usar la propiedad box-shadow para agregar efectos de sombra a las imágenes. Esta propiedad te permite agregar efectos de proyección, incluyendo el color de la sombra, el radio de desenfoque, el desplazamiento, etc.

Ejemplo:

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- Desplazamiento horizontal 5px, desplazamiento vertical 5px, radio de desenfoque 10px, color de sombra negro semitransparente -->
4
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" >
5
<!-- Sombra exterior y sombra interior, usa la palabra clave inset para especificar la sombra interior -->

Efecto:

Fondo

En CSS, el fondo es uno de los estilos más utilizados en el diseño web, usado para establecer el estilo de fondo de los elementos.

Color de fondo

El color de fondo de un elemento se establece mediante la propiedad background-color.

Ejemplo:

1
    .example1 {
2
        background-color: #f0f0f0;
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Efecto:

Imagen de fondo

La imagen de fondo de un elemento se establece mediante la propiedad background-image. Se pueden usar rutas relativas, rutas absolutas o URLs.

Ejemplo:

1
    .example1 {
2
        background-image: url('zhaojian.jpg');
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Efecto:

Repetición de fondo (Mosaico)

La propiedad background-repeat establece el modo de repetición de la imagen de fondo, que puede ser horizontal, vertical, en ambas direcciones o sin repetición.

• repeat: La imagen se repite horizontal y verticalmente (predeterminado)
• repeat-x: La imagen se repite horizontalmente
• repeat-y: La imagen se repite verticalmente
• no-repeat: La imagen se muestra solo una vez

Ejemplo:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        background-repeat: no-repeat;
8
    }
9
    .example2 {
10
        background-repeat: repeat-x;
11
    }
12
    .example3 {
13
        background-repeat: repeat-y;
14
    }

1
    Sin repetición
2
    <div class="base example1"></div>
3
    Repetición horizontal
4
    <div class="base example2"></div>
5
    Repetición vertical
6
    <div class="base example3"></div>

Efecto:

Tamaño de fondo

La propiedad background-size establece el tamaño de la imagen de fondo, que puede ser en valores de píxeles concretos, porcentajes, o usando palabras clave como cover o contain.

• Predeterminado: Muestra completamente la imagen de fondo original.
• auto: La imagen se escala proporcionalmente como fondo, la imagen se repite en mosaico.
• cover: La imagen se expande para cubrir toda el área, manteniendo la proporción. Es posible que la imagen no se muestre completamente, con partes recortadas.
• contain: La imagen se escala lo más posible manteniendo la relación de aspecto, de modo que la altura o el ancho se ajusten completamente al área de fondo. El escalado puede resultar en áreas vacías en el fondo, donde el área vacía del contenedor mostrará el color de fondo establecido por background-color.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        background-image: url('zhaojian.jpg');
7
        background-size: auto;
8
    }
9
    .example2 {
10
        background-image: url('zhaojian2.jpg');
11
        background-size: cover;
12
    }
13
    .example3 {
14
        background-image: url('zhaojian2.jpg');
15
        background-size: contain;
16
    }
17
    .example4 {
18
        background-image: url('zhaojian2.jpg');
19
        background-size: 50% 100%;
20
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>
6
    <br>
7
    <div class="base example4"></div>

Efecto:

Posición de fondo

La propiedad background-position establece la posición inicial de la imagen de fondo, pudiendo usar valores de píxeles, porcentajes o palabras clave.

• Se puede usar cualquier unidad de longitud, si la segunda posición (dirección del eje Y) no se declara, el valor predeterminado es 50% (si ambas posiciones no se establecen, el valor predeterminado es 0% 0%)
• Palabras clave de posición (left/right/top/bottom/center), se pueden usar individual o en pares (si la segunda palabra clave no se declara, el valor predeterminado es center)
• Uso mixto

Ejemplo:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        background-repeat: no-repeat;
4
        background-color: #d6d7d8;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example1 {
9
        background-position: center top;
10
    }
11
    .example2 {
12
        background-position: 50% 50%;
13
    }
14
    .example3 {
15
        background-position: 50% bottom;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Efecto:

Fijación de fondo

La propiedad background-attachment establece si la imagen de fondo está fija o se desplaza con el contenido.

• scroll: La imagen de fondo se mueve con el desplazamiento de la página (predeterminado)
• fixed: La imagen de fondo no se mueve con el desplazamiento de la página
• local: La imagen de fondo se desplaza con el contenido del elemento

Ejemplo:

1
.example1 {
2
  background-attachment: scroll;
3
}
4
.example2 {
5
  background-attachment: fixed;
6
}
7
.example3 {
8
  background-attachment: local;
9
}

Efecto:

Abreviatura de fondo

La propiedad background permite una escritura abreviada, que es mucho más concisa que declarar subpropiedades individuales y ahorra mucho código. Dado que background tiene muchas subpropiedades, el orden de la escritura abreviada también es un desafío. CSS2 recomienda la siguiente regla de orden para la escritura abreviada:

Ejemplo:

1
.example1{
2
  background: color image repeat attachment position/size;
3
}
4

5
.example2{
6
  background: #ffffff url('img_tree.png') no-repeat right top;
7
}