web-dev-qa-db-fra.com

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 afin d'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 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, c'est dans le corps de tout le site par la suite.

Ceci est mon code css:

body {
  background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}
htmlcsscss3gradient
63
Pam

Ok, je l'ai résolu en ajoutant l'URL pour 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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;

}
<div class="css"></div>
121
Pam
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%);
}

VEUILLEZ NOTER: Ceci utilise uniquement webkit et ne fonctionnera donc que dans les navigateurs webkit.

essayez:

-moz-linear-gradient = (Firefox)
-ms-linear-gradient = (IE)
-o-linear-gradient = (Opera)
-webkit-linear-gradient = (Chrome & safari)
11
Ma9ic
#multiple-background{
        box-sizing: border-box;
        width: 123px;
        height: 30px;
        font-size: 12pt;
        border-radius: 7px;             
        background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.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;
        }
<div id="multiple-background"> Completed </div>
4
Mohammad Faizan

La réponse acceptée fonctionne bien. Juste pour être complet (et comme j'aime sa brièveté), je voulais partager avec lui une 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"));
}
3
Christopher Lörken