web-dev-qa-db-fra.com

Pouvez-vous superposer un dégradé transparent CSS3 sur une image d'arrière-plan?

J'essaie de mettre un dégradé CSS3 sur le dessus d'une image d'arrière-plan. L'utilisation du code ci-dessous place une image d'arrière-plan au-dessus de mon dégradé, mais j'essaie de le faire dans l'autre sens, donc le dégradé agit comme un masque sur le dessus.

url(images/darkwood.png),
-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
background: 
url(images/darkwood.png),
-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;

Merci de votre aide

csscss3gradientmask
29
Pineapple Sunset

Je l'ai fait pour l'un de mes sites Web, j'espère que cela fonctionne pour vous;

body {
        margin: 0;
        padding: 0;
        background: url('https://i.stack.imgur.com/MUsp6.jpg') repeat;
}

body:before {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}
51
Yoann

L'exemple de cette réponse ne fonctionnera pas avec des div redimensionnables.

Votre code fonctionnerait bien. Mais si je comprends bien, CSS lit de droite à gauche. Vous devez donc utiliser les éléments suivants:

div {
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('http://www.google.co.uk/logos/classicplus.png') repeat;
}

Exemple: http://sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/

18
Alan