Se você precisar ampliar a imagem, você deve editar a imagem em um editor de imagens. Se você usa a tag img, você pode alterar o tamanho, mas isso não lhe dará o resultado desejado se você precisar que a imagem seja de fundo para algum outro conteúdo (e não se repetirá como parece que deseja). CSS3 desencadeia os poderes Isso é possível fazer em CSS3 com tamanho de fundo. Todos os navegadores modernos apoiam isso, então, a menos que você precise suportar navegadores antigos, essa é a maneira de fazê-lo. Navegadores suportados: Mozilla Firefox 4.0 (Gecko 2.0), Microsoft Internet Explorer 9.0, Opera 10.0, Safari 4.1 (webkit 532) e Chrome 3.0. Em particular, eu gosto da cobertura e conter valores que nos dão novo poder de controle que não tivemos antes. Você também pode usar o tamanho do fundo: redondo, que tem um significado em combinação com a repetição: isso ajustará a largura da imagem, de modo que ele se encaixa um número inteiro de vezes na área de posicionamento de fundo. Nota adicional Se o tamanho que você precisa é tamanho de pixel estático, ainda é inteligente redimensionar fisicamente a imagem real. Isso é tanto para melhorar a qualidade do redimensionamento (dado que seu software de imagem faz um trabalho melhor quanto os navegadores) e para economizar largura de banda se a imagem original for maior que o que exibir. Não muito difícil, se você não tem medo de ir um pouco mais em profundidade :) Há um argumento esquecido: isso não esticará sua imagem de fundo como faria com a capa. Esticaria até o lado mais longo alcançar a largura ou a altura do recipiente externo e, portanto, preservar a imagem. Edit: Theres também - webkit-background-size e - moz-background-size. A propriedade de tamanho de fundo é suportada no IE9, no Firefox 4, no Opera, no Chrome e no Safari 5. Em apoio à resposta que o tetra deu, gostaria de salientar que se a imagem for um SVG, então o redimensionamento da imagem real não é necessário. Uma vez que um arquivo SVG é apenas XML, você pode especificar o tamanho que deseja que ele apareça dentro do XML. No entanto, se você estiver usando a mesma imagem SVG em diferentes lugares e precisar de tamanhos diferentes, então, usar o tamanho do fundo é muito útil. Os arquivos SVG são inerentemente menores que as imagens raster e o redimensionamento instantâneo com CSS pode ser muito útil sem qualquer custo de desempenho que eu tenha conhecimento e, certamente, pouca ou nenhuma perda de qualidade. Aqui está um exemplo rápido: (Nota: isso funciona para mim no OS X 10.7 com Firefox 8, Safari 5.1 e Chrome 16.0.912.63) respondeu 10 de janeiro às 20:19 Você pode usar dois elementos do ltdivgt: um é um recipiente ( É o que você originalmente queria que a imagem de fundo apareça). O segundo está contido dentro. Você define seu tamanho para o tamanho da imagem de fundo (ou o tamanho que deseja aparecer). A div contida é então configurada para ser posicionada como absoluta. Desta forma, não interfere com o fluxo normal de itens na div divisória. Ele permite que você use imagens de sprite de forma eficiente. Respondeu 15 de fevereiro às 15:55 Você não pode definir o tamanho de sua imagem de fundo com a versão atual do CSS (2.1). Você só pode definir: posição. consertar. imagem URL. modo de repetição. E cor. Respondeu 27 de agosto 09 às 14:18 respondido 13 de maio 13 às 12:57 Você escreveu, mas você só verá o fundo dependendo do tamanho do recipiente. Se você tiver um recipiente vazio com a URL de fundo e seja qual for o tamanho do fundo, você não verá o bg. gif. Se você definir o tamanho do continuador combinado ao código que você escreveu acima, você poderá ver o arquivo bg. gif. Respondeu 21 de agosto 13 às 20:47 background-size está funcionando no Chrome 4.1, mas até agora não consegui fazer funcionar o Firefox 3.6. Respondeu 20 de março 10 às 2:44 Eu uso imagens em segundo plano para botões, mas mostra apenas a imagem do mesmo tamanho que o texto, mesmo que eu defina largura e altura. Em vez disso, coloco o meu texto com caracteres ampnbsp (espaços que não são breves). Eu tapo em todos quantos é necessário, basicamente, até que todo o fundo do botão apareça. Então eu posso ter um código como este: Na folha de estilos: no documento HTML: respondido 9 de dezembro às 12:24 Outra maneira é definir o tamanho do link para o tamanho da imagem de fundo. Na folha de estilo, (em v2menu-home no exemplo acima) use display: block e defina a altura e a largura lá. Isso realmente funciona. Não há necessidade de caracteres de espaço não-rompante então. Ndash Martin Thompson 9 de dezembro 10 às 12:34 Por exemplo: A imagem de fundo sempre se encaixará no tamanho do recipiente (largura 100 e altura 100px). Cross-browser CSS: respondido 28 de março 13 às 20:10 Isso é possível fazer em CSS3 com o tamanho do fundo respondido 10 de abril 14 às 7:56 Se você quiser definir o tamanho do fundo na mesma propriedade de fundo, você pode usar o uso: Respondeu 23 de fevereiro às 23:18 2017 Troca de pilha, posição do banco de trabalho A propriedade de posição de fundo no CSS permite que você mova uma imagem de fundo (ou gradiente) em torno de seu contêiner. Tem três tipos diferentes de valores: valores de comprimento (por exemplo, 100px 5px) Percentagens (por exemplo, 100 5) Palavras-chave (por exemplo, superior direita) Os valores padrão são 0 0. Isso coloca a imagem de fundo na parte superior esquerda do recipiente. Os valores de comprimento são bastante simples: o primeiro valor é a posição horizontal, o segundo valor é a posição vertical. Então, 100px 5px moverá a imagem 100px para a direita e cinco pixels para baixo. Você pode definir valores de comprimento em px. Eles. Ou qualquer um dos outros valores de comprimento CSS. As percentagens funcionam um pouco diferente. Obtenha seus chapéus de matemática: mover uma imagem de plano de fundo por X significa que ele irá alinhar o ponto X na imagem ao ponto X no contêiner. Por exemplo, 50 significa que irá alinhar o meio da imagem com o meio do recipiente. 100 significa que irá alinhar o último pixel da imagem com o último pixel do recipiente, e assim por diante. As palavras-chave são apenas atalhos para porcentagens. É mais fácil lembrar e escrever superior direito do que 0 100. e é por isso que as palavras-chave são uma coisa. Aqui está uma lista das cinco palavras-chave e seus valores equivalentes: superior. 0 na vertical direita. 100 horizontalmente inferior. 100 à esquerda na vertical. 0 horizontalmente central. 50 horizontalmente se a horizontal já estiver definida. Se é então, isso é aplicado verticalmente. É interessante notar que não importa qual ordem você usa para as palavras-chave: o centro superior é o mesmo que o topo do centro. Você só pode fazer isso se você estiver usando exclusivamente palavras-chave. O centro 10 não é o mesmo que o centro 10. Esta demo mostra exemplos de posição de fundo definido com unidades de comprimento, porcentagens e palavras-chave. Declaração de valores Você pode fornecer uma posição de fundo até quatro valores em navegadores modernos (consulte a tabela de suporte do navegador para obter detalhes). Se você declarar um valor. Esse valor é o deslocamento horizontal. O navegador define o deslocamento vertical para o centro. Quando você declara dois valores. O primeiro valor é o deslocamento horizontal e o segundo valor é o deslocamento vertical. As coisas ficam um pouco mais complicadas quando você começa a usar três ou quatro valores, mas você também obtém mais controle sobre sua colocação em segundo plano. Uma sintaxe de três ou quatro valores alterna entre palavras-chave e unidades de comprimento ou porcentagem. Você pode usar qualquer um dos valores das palavras-chave, exceto o centro, em uma declaração de posição de fundo de três ou quatro valores. Quando você especifica três valores. O navegador interpõe o quarto valor em falta como 0. Esse é um exemplo de uma posição de fundo de três valores: posiciona a imagem de fundo 45px a partir da direita e 0px da parte inferior do recipiente. Este é um exemplo de uma posição de fundo de quatro valores: isso coloca a imagem de plano de fundo 45px da direita e 20px da parte inferior do recipiente. Observe a ordem dos valores nos exemplos acima: palavras-chave seguidas por unidades de comprimento. Uma posição de plano de fundo de três ou quatro valores deve seguir esse formato, com uma palavra-chave que precede uma unidade de comprimento ou porcentagem. Essa demonstração inclui exemplos de um valor, dois valores, três valores e quatro valores de posição de fundo. Mais código de lançamento de recursos Você pode escrever comentários no Markdown. Isso torna o código fácil de publicar, pois você pode escrever código inline como ltdivthisltdiv ou blocos de código multilinha em cercas de back-back triplas () com duas novas linhas antes e depois. Código de conduta Absolutamente qualquer pessoa é bem-vinda para enviar um comentário aqui. Mas nem todos os comentários serão postados. Pense nisso como escrever uma carta ao editor. Todos os comentários enviados serão lidos, mas não todos publicados. Os comentários publicados serão no tópico, úteis, e ainda mais a discussão ou debate. Quer nos dizer algo de forma privada. Sinta-se livre para usar nosso formulário de contato. Esse é um ótimo lugar para nos informar sobre erros de digitação ou qualquer coisa fora do tópico.
No comments:
Post a Comment