color de fondo degradado e imagen de fondo DRYly

Tengo un número de títulos y en el fondo de cada uno quiero mostrar el mismo color de degradado, pero una imagen de fondo diferente (no repetitiva). Quiero evitar la duplicación de las reglas de CSS para el color del degradado de fondo o la posición de la imagen de fondo, ya que serán las mismas para cada título. En otras palabras, lo único que debería especificar para un encabezado individual es la ruta al archivo de imagen de fondo.color de fondo degradado e imagen de fondo DRYly

Esto es lo que tengo en este momento:

<h1 class="banner bgImage img1">background image 1</h1> 
<h1 class="banner bgImage img2">background image 2</h1> 
<h1 class="banner bgImage img3">background image 3</h1> 
<h1 class="banner">heading without background image</h1> 

.banner { 
    /* For old browsers that don't support gradients */ 
    background-color: #9FCC1D; 

    /* browser-specific prefixes omitted */ 
    background-image: linear-gradient(#75A319, #9FCC1D); 
    padding: 7px 7px 7px 15px; 
} 

/* Specifies position of background image */ 
.bgImage { 
    background-position: 5px 50%, 0 0; 
    background-repeat: no-repeat; 
    padding-left: 30px; 
} 

.img1 { 
    background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D); 
} 

.img2 { 
    background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D); 
} 

.img3 { 
    background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D); 
}

Hay un par de problemas con este

tengo que repetir el estilo linear-gradient en cada .imgX regla
Doesn' t se procesa correctamente en Chrome, que no parece ser compatible con una lista separada por comas de las propiedades background-image y background-repeat. Esto es lo que se muestra en Chrome

enter image description here

¿Cómo puedo solucionar el problema con la forma en que el fondo se representa en Chrome y reducir al mínimo la duplicación de reglas CSS?

Fuente

2012-02-24 Dónal

Funciona bien en Chrome 17.0.963.56 m (con el prefijo -webkit-) – juanrpozo

Utilice la pseudoclase :before para los iconos de fondo.

.img1:before { 
    content: ''; 
    float: left; 
    position: relative; 
    background: transparent url('img1.png') left top no-repeat; 
    width: 16px; /* change to actual width of img */ 
    height: 16px; /* change to actual height of img */ 
}

O, ya que usted está tratando de aliviar la cantidad de CSS, puede especificar una clase para el gradiente y añadir que en el código HTML.

Fuente

2012-02-24 17:07:54

Espero no necesitar usar tanto CSS solo para especificar una imagen de fondo diferente para cada encabezado –

Especifique un clase para tu gradiente Añade esa clase en tu HTML. –

http://jsfiddle.net/2Hcgn/ – juanrpozo

Don, tiene dos clases a las que se puede aplicar este degradado de fondo, bgImage y banner. Simplemente aplica tu gradiente en una de esas clases e ir desde allí. También agregue repeat-x justo después de la url de su imagen para asegurarse de que se repita.

Fuente

2012-02-27 14:43:27

color de fondo degradado e imagen de fondo DRYly

Respuesta

Cuestiones relacionadas