web-dev-qa-db-fra.com

Dégradé blanc à transparent avec image de fond

J'ai besoin d'appliquer un dégradé blanc à transparent qui couvre environ un 1/4 du haut de la page et une image d'arrière-plan visible pour le reste de la page.

Je cherche à obtenir un mélange homogène d'un dégradé à une image texturée et à le faire en CSS3.

css3gradientcss
26
Craig

Je recommande ltimate CSS Gradient Generator - ColorZilla.com

C'est un outil bien conçu et il y a un préréglage blanc à transparent.

css gradient generator

Le code CSS qu'il génère pour un dégradé blanc à transparent est le suivant:

background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
44
MikeM

Je préfère utiliser un autre outil pour la génération de dégradés - EnjoyCSS . Il permet également de générer d'autres fonctionnalités CSS comme l'arrière-plan, les ombres, les transitions, etc.

enter image description here Dégradé blanc à transparent généré avec cet outil:

background-image: -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,1) 100%);
background-position: 50% 50%;
-webkit-background-Origin: padding-box;
background-Origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
2
Mikhail Shabrikov