Tradução do espanhol para o português
obs.:
as imagens, vide em
http://vagabundia.blogspot.com/
2010/01/la-propiedad-background-size.html
Propriedade Background-size
Seize the sair do Firefox 3.6 para experimentar um pouco com as novas extensões que correspondem a algumas das directivas para o CSS3 futuro e que estão lentamente a ser acrescentado aos navegadores exceto para Intenet Explorer.
Um deles é o que nos permite fazer algo que muitos pedem e já houve uma entrada sobre o assunto: Redimensione a imagem de fundo.
Esta alternativa está prevista nos projectos da propriedade seria w3org e o nome genérico para o fundo de tamanho, mas os browsers utilizam nomes diferentes:
-moz-background-size no Firefox 3,6
-o-fundo-size no Opera 9,5
-webkit-background-size no Google Chrome e Safari
-khtml-background-size Konqueror 3.5.4
Ela nos permite estabelecer o tamanho da imagem para usar como papel de parede e suporta dois valores, a largura e altura, em pixels e em porcentagem. Eventualmente, há outros valores que podemos usar como um carro, conter e cobrir a definição de ligação largura / altura para manter.
Muito blablabla. Vamos aos exemplos para ver claramente.
Nós iremos usar uma imagem que você tem é 200x158 pixels e aplicá-lo como fundo de uma DIV para daremeos a uma dimensão de 300x300. Adicionado o estilo, poderíamos ter este código:
<div style="background: no-repeat url(URL_imagen) #000 deixou top; width: 300px; height: 300px;"> </ div>
e gostaríamos de ver isto:
Como a imagem de fundo é pequena, por padrão, não é suficiente para cobrir todo o rectângulo assim, vamos adicionar o novo imóvel com valores de 100% para ambos, largura e altura:
-moz-background-size: 100% 100%;-o-fundo-size: 100% 100%;-webkit-background-size: 100% 100%;
E gostaríamos de ver isto:
Agora faça o mesmo, mas com valores de 50% para a largura em um caso e para a alta nos outros:
-moz-background-size: 100% 50%;-o-fundo-size: 100% 50%;-webkit-background-size: 100% 50%;
-moz-background-size: 50% a 100%;-o-fundo-size: 50% a 100%;-webkit-background-size: 50% a 100%;
Isso seria parecido com:
O que eles contêm e capa? Nós definimos o seguinte:
/ * O retângulo à esquerda * /
-moz-background-size: Container;
/ * O retângulo à direita * /
-moz-background-size: cobertura;
E gostaríamos de ver isso no Firefox só porque, aparentemente, esses valores ainda não estão devidamente apoiada por outros navegadores.
Original
La propiedad background-size
JMiurAprovechemos la salida Firefox 3.6 para experimentar un poco con las nuevas extensiones que se corresponden con algunas de las directivas para el futuro CSS3 y que lentamente van siendo agregadas a los navegadores a excepción de Intenet Explorer.
Una de ellas es la que permite hacer algo que muchos preguntan y alguna vez hubo una entrada al respecto: Redimensionar la imagen de fondo.
Esta alternativa está contemplada en los borradores de la w3org y la propiedad tendría el nombre genérico de background-size pero, los navegadores utilizan nombres distintos:
-moz-background-size en Firefox 3.6
-o-background-size en Opera 9.5
-webkit-background-size en Google Chrome y Safari
-khtml-background-size Konqueror 3.5.4
Nos permite establecer la dimensión de la imagen a usar como fondo y admite dos valores, el ancho y el alto, tanto en pixeles como en porcentajes. Eventualmente, hay otros valores que podemos usar como auto, contain y cover que establecen la relación ancho/alto a mantener.
Mucho blablabla. Vamos a los ejemplos para que se vea con claridad.
Usaremos una imagen que tiene tiene 200x158 pixeles y la aplicaremos como fondo a un DIV al que le daremeos una dimensión de 300x300. Agregado el estilo, podríamos tener este código:
Una de ellas es la que permite hacer algo que muchos preguntan y alguna vez hubo una entrada al respecto: Redimensionar la imagen de fondo.
Esta alternativa está contemplada en los borradores de la w3org y la propiedad tendría el nombre genérico de background-size pero, los navegadores utilizan nombres distintos:
-moz-background-size en Firefox 3.6
-o-background-size en Opera 9.5
-webkit-background-size en Google Chrome y Safari
-khtml-background-size Konqueror 3.5.4
Nos permite establecer la dimensión de la imagen a usar como fondo y admite dos valores, el ancho y el alto, tanto en pixeles como en porcentajes. Eventualmente, hay otros valores que podemos usar como auto, contain y cover que establecen la relación ancho/alto a mantener.
Mucho blablabla. Vamos a los ejemplos para que se vea con claridad.
Usaremos una imagen que tiene tiene 200x158 pixeles y la aplicaremos como fondo a un DIV al que le daremeos una dimensión de 300x300. Agregado el estilo, podríamos tener este código:
<div style="background: #000 url(URL_imagen) no-repeat left top; height: 300px; width: 300px;"></div>
y veríamos esto:
Como la imagen de fondo es pequeña, por defecto, no alcanza a cubrir el total del rectángulo así que, le agregaremos la nueva propiedad con valores de 100% tanto para el ancho como para el alto:
-moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%;
Y veríamos esto:
Ahora, hagamos lo mismo pero, con valores del 50% para el ancho en un caso y para el alto en el otro:
-moz-background-size: 100% 50%; -o-background-size: 100% 50%; -webkit-background-size: 100% 50%; -moz-background-size: 50% 100%; -o-background-size: 50% 100%; -webkit-background-size: 50% 100%;
Este sería el resultado:
¿Y que hacen contain y cover? Los definimos así:
/* el rectángulo de la izquierda */ -moz-background-size: contain; /* el rectángulo de la derecha */ -moz-background-size: cover;
Y veríamos esto en Firefox solamente porque al parecer, esos valores aún no son soportados correctamente por los otros navegadores.
de Vagabundia <vagabundia@gmail.com>
para brandaodasilvaedilene@gmail.com
datada de 25 de janeiro 2010 02:06
Assunto Vagabundia
enviado feedburner.bounces.google.com
assinado pelo google.com
| Originado: |
| Posted: 24 Jan 2010 07:00 PM PST Aprovechemos la salida Firefox 3.6 para experimentar un poco con las nuevas extensiones que se corresponden con algunas de las directivas para el futuro CSS3 y que lentamente van siendo agregadas a los navegadores a excepción de Intenet Explorer. Una de ellas es la que permite hacer algo que muchos preguntan y alguna vez hubo una entrada al respecto: Redimensionar la imagen de fondo. Esta alternativa está contemplada en los borradores de la w3org y la propiedad tendría el nombre genérico de background-size -moz-background-size en Firefox 3.6 -o-background-size en Opera 9.5 -webkit-background-size en Google Chrome y Safari -khtml-background-size Konqueror 3.5.4 Nos permite establecer la dimensión de la imagen a usar como fondo y admite dos valores, el ancho y el alto, tanto en pixeles como en porcentajes. Eventualmente, hay otros valores que podemos usar como auto, contain y cover que establecen la relación ancho/alto a mantener. Mucho blablabla. Vamos a los ejemplos para que se vea con claridad. Usaremos una imagen que tiene tiene 200x158 pixeles y la aplicaremos como fondo a un DIV al que le daremeos una dimensión de 300x300. Agregado el estilo, podríamos tener este código: pero, los navegadores utilizan nombres distintos: <div style="background: #000 url(URL_imagen) no-repeat left top; height: 300px; width: 300px;"></div> y veríamos esto: Como la imagen de fondo es pequeña, por defecto, no alcanza a cubrir el total del rectángulo así que, le agregaremos la nueva propiedad con valores de 100% tanto para el ancho como para el alto: -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; Y veríamos esto: Ahora, hagamos lo mismo pero, con valores del 50% para el ancho en un caso y para el alto en el otro: -moz-background-size: 100% 50%; -o-background-size: 100% 50%; -webkit-background-size: 100% 50%; -moz-background-size: 50% 100%; -o-background-size: 50% 100%; -webkit-background-size: 50% 100%; Este sería el resultado: ¿Y que hacen contain y cover? Los definimos así: /* el rectángulo de la izquierda */ -moz-background-size: contain; /* el rectángulo de la derecha */ -moz-background-size: cover; Y veríamos esto en Firefox solamente porque al parecer, esos valores aún no son soportados correctamente por los otros navegadores. |
http://redeselinks.blogspot.com
Postagens
