2012-04-26 18 views
5

vi un código CSS, donde fue comoqué hace background: url transparente(); ¿hacer?

body { background: transparent url ('background.jpg') repeat scroll;} 

¿Qué hace el valor transparente? Intenté googlear sobre esto, pero no ayuda. ¿No lo anularía background.jpg?

Gracias.

Respuesta

7

transparent es el color. Un elemento puede tener una imagen de fondo y un color de fondo.

Lo anterior es equivalente a:

body { 
    background-color: transparent; 
    background-image: url('background.jpg'); 
    background-repeat: repeat; 
    background-attachment: scroll; 
} 

El color es importante en general, si por ejemplo, la imagen de fondo no se carga, o la imagen contiene regiones transparentes, o la imagen no se repite para ocupar toda el área (que no es el caso en su ejemplo).

Sin embargo, dado que transparent es el "valor inicial", nunca es necesario cuando se utiliza la abreviatura background, ya que la abreviatura establece automáticamente todas las propiedades no especificadas a su valor inicial.

Por lo tanto, el único caso en que el uso transparent tiene sentido como un color de fondo consiste en:

  1. no usar la taquigrafía, pero en lugar de directamente a través de la propiedad background-color;
  2. usándolo para anular otro selector que se aplica directamente a ese elemento.

Un ejemplo sería

body.foo { background-color: blue; } 
body.foo.bar { background-color: transparent; } 
+1

Me temo que eso no es correcto. Establecer explícitamente el valor no hace ninguna diferencia (ver mi respuesta). – user123444555621

+0

Buena captura @ Pumbaa80, supuse que era 'heredar'. Fijación. – Domenic

+0

@MrLister, dije "arreglar", no "arreglar". * Ahora * está arreglado;). – Domenic

3

En realidad, no es necesario.

http://www.w3.org/TR/CSS21/colors.html#background
dado una declaración válida, la propiedad 'background' primeros conjuntos de todas las propiedades de fondo individuales a sus valores iniciales, a continuación, asigna valores explícitos que figuran en la declaración.

Desde background-color 's is transparent valor inicial, se aplica de forma implícita al establecer background:url(...);

Más precisamente, la regla de estilo es equivalente a

background-color: transparent; 
background-image: url(...); 
background-repeat: repeat; 
background-attachment: scroll; 
background-position: 0% 0%; 

en ambos casos.

Sin embargo, muchos autores (entre ellos yo) prefieren establecer explícitamente el valor

  • para facilitar la lectura
  • para evitar los errores del navegador, o simplemente
  • porque no saben mejor