Curso IT Fundamentos CSS 023_Imagens, Fundo

Imagens

As imagens são um tipo de mídia muito importante nas páginas web. O uso adequado de imagens pode tornar as páginas web coloridas e vivas, não se limitando ao texto frio.

Layout de Imagens

O elemento img é, por padrão, um elemento inline e possui uma margem padrão de 5px. Ao defini-lo como elemento de bloco, apenas uma imagem pode ser exibida por linha. Ao defini-lo como elemento inline, várias imagens podem ser exibidas em uma linha. Para posicionar elementos de bloco, usa-se a propriedade margin; para posicionar elementos inline, usa-se a propriedade text-align.

Exemplo:

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="" >

Efeito:

Transparência de Imagem

No CSS, você pode usar a propriedade opacity para definir a transparência de elementos (incluindo imagens). Esta propriedade aceita um valor no intervalo de 0 (completamente transparente) a 1 (completamente opaco).

Se você quiser apenas tornar o fundo da imagem transparente sem afetar o conteúdo, pode usar valores de cor RGBA.

Exemplo:

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

Efeito:

Cantos Arredondados de Imagem

No CSS, você pode usar a propriedade border-radius para adicionar cantos arredondados às imagens. Esta propriedade é usada para definir o grau de curvatura dos cantos da borda de um elemento.

Exemplo:

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- Definir o raio do canto arredondado, pode ser ajustado conforme necessário -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- Raio horizontal 20px, raio vertical 10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- Superior esquerdo 10px, superior direito 20px, inferior direito 15px, inferior esquerdo 5px -->

Efeito:

Sombra de Imagem

No CSS, você pode usar a propriedade box-shadow para adicionar efeitos de sombra às imagens. Esta propriedade permite adicionar efeitos de projeção, incluindo cor da sombra, raio de desfoque, deslocamento, etc.

Exemplo:

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- Deslocamento horizontal 5px, deslocamento vertical 5px, raio de desfoque 10px, cor da sombra preto semi-transparente -->
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 externa e sombra interna, use a palavra-chave inset para especificar a sombra interna -->

Efeito:

Fundo

No CSS, o fundo é um dos estilos mais utilizados no design web, usado para definir o estilo de fundo dos elementos.

Cor de Fundo

A cor de fundo de um elemento é definida através da propriedade background-color.

Exemplo:

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

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

Efeito:

Imagem de Fundo

A imagem de fundo de um elemento é definida através da propriedade background-image. Pode-se usar caminhos relativos, caminhos absolutos ou URLs.

Exemplo:

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

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

Efeito:

Repetição de Fundo (Ladrilhamento)

A propriedade background-repeat define o modo de repetição da imagem de fundo, que pode ser horizontal, vertical, em ambas as direções ou sem repetição.

• repeat: A imagem se repete horizontal e verticalmente (padrão)
• repeat-x: A imagem se repete horizontalmente
• repeat-y: A imagem se repete verticalmente
• no-repeat: A imagem é exibida apenas uma vez

Exemplo:

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
    Sem repetição
2
    <div class="base example1"></div>
3
    Repetição horizontal
4
    <div class="base example2"></div>
5
    Repetição vertical
6
    <div class="base example3"></div>

Efeito:

Tamanho de Fundo

A propriedade background-size define o tamanho da imagem de fundo, que pode ser em valores de pixels concretos, porcentagens, ou usando palavras-chave como cover ou contain.

• Padrão: Exibe completamente a imagem de fundo original.
• auto: A imagem é dimensionada proporcionalmente como fundo, a imagem é repetida em ladrilhamento.
• cover: A imagem é expandida para cobrir toda a área, mantendo a proporção. A imagem pode não ser exibida completamente, com partes cortadas.
• contain: A imagem é dimensionada o máximo possível mantendo a proporção, de modo que a altura ou largura se ajuste completamente à área de fundo. O dimensionamento pode resultar em áreas vazias no fundo, onde a área vazia do contêiner exibirá a cor de fundo definida por background-color.

Exemplo:

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>

Efeito:

Posição de Fundo

A propriedade background-position define a posição inicial da imagem de fundo, podendo usar valores de pixels, porcentagens ou palavras-chave.

• Qualquer unidade de comprimento pode ser usada; se a segunda posição (direção do eixo Y) não for declarada, o valor padrão é 50% (se ambas as posições não forem definidas, o valor padrão é 0% 0%)
• Palavras-chave de posição (left/right/top/bottom/center), podem ser usadas individualmente ou em pares (se a segunda palavra-chave não for declarada, o valor padrão é center)
• Uso misto

Exemplo:

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>

Efeito:

Fixação de Fundo

A propriedade background-attachment define se a imagem de fundo é fixa ou rola com o conteúdo.

• scroll: A imagem de fundo se move com a rolagem da página (padrão)
• fixed: A imagem de fundo não se move com a rolagem da página
• local: A imagem de fundo rola com o conteúdo do elemento

Exemplo:

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

Efeito:

Abreviação de Fundo

A propriedade background permite uma escrita abreviada, que é muito mais concisa do que declarar subpropriedades individuais e economiza muito código. Como background possui muitas subpropriedades, a ordem da escrita abreviada também é um desafio. O CSS2 recomenda a seguinte regra de ordem para a escrita abreviada:

Exemplo:

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
}