Utiliser le dégradé CSS sur l’image d’arrière-plan

J’ai essayé d’utiliser un dégradé linéaire au-dessus de mon image d’arrière-plan pour obtenir un effet de fondu sur le fond de mon arrière-plan, du noir au transparent, mais je n’arrive pas à le rendre visible.

J’ai lu d’autres cas ici et des exemples, mais aucun d’entre eux ne fonctionne pour moi. Je ne peux voir que le dégradé ou l’image mais pas les deux. Voici le lien

Cliquez simplement sur le premier logo, ignorez cet effet, ce que j’essaie est dans le corps de tout le site après cela.

Ceci est mon code CSS:

body { background: url('http://soffr.miximages.com/html/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))); } 

Ok, je l’ai résolu en ajoutant l’URL de l’image de fond à la fin de la ligne .

Voici mon code de travail:

 .css { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://soffr.miximages.com/html/so-icon.png?v=c78bd457575a') no-repeat; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://soffr.miximages.com/html/so-icon.png?v=c78bd457575a') no-repeat; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://soffr.miximages.com/html/so-icon.png?v=c78bd457575a') no-repeat; background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://soffr.miximages.com/html/so-icon.png?v=c78bd457575a') no-repeat; background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://soffr.miximages.com/html/so-icon.png?v=c78bd457575a') no-repeat; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://soffr.miximages.com/html/so-icon.png?v=c78bd457575a') no-repeat; height: 200px; } 
 
 body { margin: 0; padding: 0; background: url('img/background.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%); } 

S’IL VOUS PLAÎT NOTE: Ceci utilise uniquement webkit afin qu’il ne fonctionne que dans les navigateurs webkit.

essayez:

 -moz-linear-gradient = (Firefox) -ms-linear-gradient = (IE) -o-linear-gradient = (Opera) -webkit-linear-gradient = (Chrome & safari) 

La réponse acceptée fonctionne bien. Juste pour être complet (et comme j’aime sa brièveté), je voulais partager son expérience avec la boussole (SCSS / SASS):

 body{ $colorStart: rgba(0,0,0,0); $colorEnd: rgba(0,0,0,0.8); @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg")); } 
 #multiple-background{ box-sizing: border-box; width: 123px; height: 30px; font-size: 12pt; border-radius: 7px; background: url("http://soffr.miximages.com/html/Checkbox Full.png"), linear-gradient(to bottom, #4ac425, #4ac425); background-repeat: no-repeat, repeat; background-position: 5px center, 0px 0px; background-size: 18px 18px, 100% 100%; color: white; border: 1px solid #e4f6df; box-shadow: .25px .25px .5px .5px black; padding: 3px 10px 0px 5px; text-align: right; } 
 
Completed