Cómo agregar otra imagen de fondo al fondo existente en css

Los navegadores modernos permiten agregar múltiples elementos separados por comas al elemento. Por ejemplo, yo puedo definir 2 fondos de esta manera:Cómo agregar otra imagen de fondo al fondo existente en css

background: url(image1.png) no-repeat left top, url(image2.png) no-repeat right bottom;

Se trabaja maravilloso, y todo, pero a menudo hay una situación que entonces yo quiero tener un fondo siempre se aplica en el elemento, y otro sólo entonces añado segunda clase o algún modificador Por ejemplo, quiero el siguiente código:

<style> 
    .one { background: url(image1.png) no-repeat left top; } 
    .two { background: url(image2.png) no-repeat right bottom;} 
</style> 

<div class="one two"></div>

... para devolver el elemento con ambos fondos aplicados (el código anterior solo devolverá el segundo).

¿Hay alguna manera en el CSS moderno de agregar el segundo sin copiar completamente el primero en él?

Fuente

2011-10-24 Alexey Ivanov

-1

Sé que no desea copiar totalmente otra cosa que me gustaría hacer algo como esto

.one{ 
    background: url(image1.png) no-repeat left top; 
    } 

.two{ 
    background: url(image1.png) no-repeat left top, 
    background: url(image2.png) no-repeat right bottom; 
}

donde la segunda clase, básicamente, "sobreescribe" la primera clase.

La otra opción es utilizar un lenguaje de hoja de estilos dinámico como LESS (http://lesscss.org/), donde puede usar variables.

en menos, se podría hacer algo como esto

@twoBackgrounds: url(image1.png) no-repeat left top; 

.one{ 
    @twoBackgrounds; 
    } 

.two{ 
    @twoBackgrounds, 
    background: url(image2.png) no-repeat right bottom; 
}

Fuente

2011-10-24 18:12:56

Gracias por menor idea. Si no hay una solución nativa, probablemente lo haga, pero aún espero que haya una nativa. :) –

Tiene que separar las propiedades de fondo, de lo contrario solo se usará la última declaración. Sin embargo, la idea de repetir el primero es correcta y el uso de variables LESS es una manera fácil de mantenerlo SECO. – Ronald

@ Jason

Este código no funcionará. Debe usar esto

.one { 
    background: url(image1.png) no-repeat left top; 
} 

.two { 
    background: url(image1.png) no-repeat left top, url(image2.png) no-repeat right bottom; 
}

Fuente

2015-04-27 17:54:40 Andreas

Puede hacer esto con un pseudo-elemento como after o before y agregando un ajuste al elemento.

.wrap { 
 
    width:500px; 
 
    height: 500px; 
 
    border:1px solid red; 
 
    position:relative; 
 
} 
 
.one { 
 
    width:100%;height:100%; 
 
    background-image: url(http://dummyimage.com/250x250/dfdbb9/dfdbb9.png); 
 
    background-repeat:no-repeat; 
 
    background-position:left top; 
 
} 
 
.two:after {  
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top:0; 
 
    left:0; 
 
    z-index: -1; 
 
    background-image: url(http://dummyimage.com/250x250/b9d9df/b9d9df.png); 
 
    background-repeat:no-repeat;   
 
    background-position:right bottom; 
 
}

<div class="wrap"> 
 
    <div class="one two"></div> 
 
</div>

Aquí es el jsFiddle: http://jsfiddle.net/alexut/jz0pm47t/1/

Fuente

2015-07-03 21:51:33 Alexut

Cómo agregar otra imagen de fondo al fondo existente en css

Respuesta

Cuestiones relacionadas