Comment s'estomper l'image de fond d'écran noir avec le CSS?

Je veux avoir un background-image qui n'est pas répété. Lorsque l'image se termine, il devrait doucement fondu au noir.

Voici un exemple de ce que je veux dire, il manque juste le "soft fading". L'image se termine brutalement et il est noir, je voudrais avoir cette transition plus en douceur. Est-ce possible?

(image prélevé au hasard de google)

body {
    background:url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png) #000 no-repeat;
}

Live-Démo: http://jsfiddle.net/sMc8a/

OriginalL'auteur user2015253 | 2013-09-01

  1. 4

    Vous pouvez essayer d'utiliser ce code. http://jsfiddle.net/sMc8a/3/

    HTML

    <div class="example">
    Hello
</div>

    CSS

    body {
background: black;
}
.example {
width: 300px;
height: 300px;
background-image: -webkit-linear-gradient(top, 
rgba(0,0,0,0.9) 0%, 
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
-webkit-linear-gradient(left, 
rgba(0,0,0,0.9) 0%, 
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image: -moz-linear-gradient(top, 
rgba(0,0,0,0.9) 0%, 
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
-moz-linear-gradient(left, 
rgba(0,0,0,0.9) 0%, 
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image: -o-linear-gradient(top, 
rgba(0,0,0,0.9) 0%, 
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
-o-linear-gradient(left, 
rgba(0,0,0,0.9) 0%, 
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image: linear-gradient(top, 
rgba(0,0,0,0.9) 0%, 
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
linear-gradient(left, 
rgba(0,0,0,0.9) 0%, 
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 80%,
rgba(0,0,0,0.9) 100%
),
url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
}
    Vous pourriez arrêter de détester pour fournir une meilleure réponse.
    Cela ne fonctionne pas, testé dans Firefox 24. J'ai essayé d'enlever le "-webkit-" les préfixes, n'est toujours pas fonctionnelle.
    Ok je vais fournir un correctif, juste un instant
    Ok la mise à jour avec le code et lien
    Merci je peux travailler avec cela à partir de ce point 🙂

    OriginalL'auteur derek_duncan

  2. 4

    Cela fonctionne dans toutes les majeur navigateurs, faites le test!

    Démo ici.

    .background {
background-image: -webkit-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -moz-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -o-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -ms-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
}

    J'ai inclus les -ms - préfixe.. Mais je ne pense pas vraiment que c'est nécessaire.

    Comme je l'ai dit, cela ne fonctionne que dans les principaux navigateurs.. donc ajouter de secours, tels que:

    background: url('http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png');
    Les dernières versions de tous les principaux navigateurs prennent en charge la norme de la syntaxe. IE9 ne comprends pas dégradés, même avec le préfixe, donc vous ne pouvez pas obtenir tout en l'incluant.
    Ce que je dis est que le vendeur préfixes ne sont pas nécessaires par tous les principaux navigateurs plus. Vous pourriez se débarrasser de l'autre de 4 lignes et de réduire le CSS à peu le niveau linear-gradient, et seul le comme 3 personnes toujours en cours d'exécution les anciennes versions de FF ou Opera aurait jamais remarqué. (Je n'ai jamais utiliser les préfixes de toute façon, pour la même raison pour laquelle je ne pas utiliser les commentaires conditionnels ou JavaScript-pas-ECMAScript fonctionnalités.) Vous avez juste un arrière-plan comme un secours, que vous étiez en train de parler.

    OriginalL'auteur Josh Crozier