Quando estudamos os estilos de outros sites, muitas vezes encontramos uma situação em que a mesma imagem é usada em muitos atributos de fundo para satisfazer o uso de várias partes da página web. Se você abrir esse tipo de foto e dar uma olhada, verá que ela contém muitas fotos pequenas, como:
Outro exemplo:
Essas pequenas imagens são as partes após a divisão da imagem inteira. Cada parte é colocada em uma imagem em vez de ser armazenada como imagens separadas. Todos sabemos que o objetivo é reduzir o número de solicitações HTTP e economizar tempo e largura de banda .
Então, como perceber que apenas parte de uma imagem é exibida em locais diferentes? Isso utiliza o problema de posicionamento da imagem de fundo de que falaremos hoje. Acredito que muitas pessoas tenham ficado deprimidas com esse problema, e amigos costumam me perguntar, então hoje vou explicar de forma sistemática:
Sabemos que ao usar uma imagem como plano de fundo, o css deve ser escrito assim . por exemplo, também pode ser corpo. O plano de fundo de td, p, etc.
Código: div{ background: #FFF url(image) no-repeat Fixed xy;} |
Os valores do atributo background aqui são:
#FFF background color: (valor da cor, o local onde a imagem de fundo não é coberta, ou quando há não há cor de fundo da imagem de fundo)
imagem de fundo da imagem: (aqui está o endereço da imagem)
Se a não repetição é repetida: (Quando a imagem é menor que o tamanho do contêiner, a imagem será organizada repetidamente para preencher o contêiner por padrão. Sem repetição significa sem repetição. Somente neste momento as coordenadas de posicionamento subsequentes serão útil.)
Se o fundo fixo rola com o contêiner: (Existem dois valores opcionais, rolagem de rolagem, fixo não rola, o padrão é rolagem)
Posicionamento da imagem de fundo xy: (Observe que o posicionamento só tem sentido sob não repetição. Este é o foco de hoje)
Precisamos esclarecer alguns pontos no posicionamento da imagem de fundo:
1. O primeiro dos dois valores é o posicionamento horizontal, chamamos de posicionamento do eixo x. O último valor é o posicionamento longitudinal, que chamamos de posicionamento do eixo y. Se houver apenas um valor, o padrão será a direção do eixo x. Neste momento, a direção do eixo y será padronizada para alinhamento para cima e para baixo, que é o centro.
2. A origem do eixo de coordenadas é o vértice esquerdo do contêiner correspondente.
3. A seta do eixo y desta coordenada aponta para baixo, ou seja, os valores xy no canto inferior direito (dentro do contêiner) são todos positivos.
4. Os valores xy representam respectivamente o valor do vértice esquerdo da imagem de fundo em relação à origem da coordenada (ou seja, o vértice esquerdo do contêiner).
5. O valor de xy pode ser expresso como porcentagem ou px.
6. xy também pode ser expresso pelos cinco métodos de alinhamento "esquerda, direita, superior, inferior, centro", mas observe: quando expresso por "esquerda, direita, superior, inferior, centro", as regras de alinhamento são aplicadas, em vez do que regras de coordenadas . Quando x está à esquerda, significa que o lado esquerdo da imagem está alinhado com o lado esquerdo do contêiner. Quando está à direita, significa que o lado direito da imagem está alinhado com o lado direito do contêiner. , significa que a parte superior da imagem está alinhada com a parte superior do contêiner. Quando xy é igual ao centro. significa alinhamento centralizado.
7. Quando xy é expresso como porcentagem ou px, seu valor pode ser um número negativo. Podemos entender facilmente o significado dos números negativos aplicando as regras de coordenadas. Quando x é um número negativo, significa que o vértice esquerdo da imagem está à esquerda do vértice esquerdo do contêiner. isso significa que o vértice esquerdo da imagem está acima do ponto fixo esquerdo do contêiner. Ou seja, para a esquerda e para cima, além do escopo do contêiner.
Abaixo utilizo algumas ilustrações para ilustrar diversas situações . O bloco azul representa a imagem, e a caixa pontilhada representa o container (pode ser div, td ou diretamente body. Observe que só podemos ver a imagem de fundo dentro do container). . Eu uso branco Indica a parte visível, e o que está além do escopo do container é invisível eu uso cinza para indicá-la. As coordenadas do ponto fixo esquerdo do contêiner são (0, 0).
O primeiro, a imagem de fundo está alinhada com o canto superior esquerdo do conteúdo, 0px 0px também pode ser escrito como canto superior esquerdo
Na segunda imagem, a imagem de fundo está no meio do contêiner e as coordenadas do ponto fixo são valores positivos.
Na terceira imagem, a imagem de fundo está no lado superior esquerdo do contêiner e as coordenadas do ponto fixo são negativas
------------------------- --------- ----------------------------------------
Neste ponto podemos entender como usar o valor de posicionamento no fundo para posicionar com precisão uma imagem de fundo. Vamos voltar e dar uma olhada nas duas imagens apresentadas no início. Podemos usar: posicionamento de fundo e visível apenas dentro do contêiner. . Propriedades para chamar uma determinada parte da imagem inteira à vontade.
Mas para a comodidade de ligar, precisamos prestar atenção a algumas regras na hora de organizar essas fotos pequenas. Por exemplo: a distância entre as fotos pequenas geralmente é do tamanho do recipiente em que as fotos pequenas são chamadas, ou a distância é maior, para evitar que sejam exibidos no contêiner. Mostre-nos fotos que não queremos mostrar!
Além disso, se o posicionamento utiliza porcentagens, o algoritmo é bastante especial. Deixe-me dar um exemplo:
Código: background:#FFF url(image) no-repeat fixa 50% -30% |
Neste momento, onde a imagem deve estar no contêiner A fórmula do algoritmo é a seguinte:
a posição da coordenada
;do vértice esquerdo da imagem do vértice esquerdo do contêiner para
x: (largura do contêiner - largura da imagem) x50%
y: (altura do contêiner - altura da imagem) x (-30%)
O resultado obtido aplica a regra das coordenadas. Se a diferença for negativa e a porcentagem for positiva, o resultado da operação é negativo. Se a diferença for negativa e o percentual for negativo, o resultado é positivo. Resumindo, a operação aqui está de acordo com o algoritmo. Ao trazer o resultado da operação para a regra de coordenadas, você pode obter a posição da imagem.
Por exemplo: o contêiner tem largura: 600px altura: 600px e a imagem tem largura: 200px altura: 200px;
Usando o estilo acima, podemos obter a posição da imagem como:
x: (600px-200px)*50%
y: (600px-200px)*(-30%)
Conforme mostrado abaixo:
