Image de fond transparente avec un Gradient

gardez à l'esprit qu'un gradient CSS est en fait un valeur de l'image, pas une couleur de la valeur que l'on pourrait attendre. Par conséquent, il correspond à background-image spécifiquement, et pas background-color, ou de l'ensemble de l' background raccourci.

essentiellement, ce que vous essayez vraiment de faire, c'est de se superposer deux images de fond: une image bitmap sur un gradient. Pour ce faire, vous spécifiez à la fois dans la même déclaration, en les séparant par une virgule. Précisez l'image en premier, suivi par le gradient. Si vous spécifiez une couleur de fond, cette couleur sera toujours peinte sous l'image la plus basse, ce qui signifie qu'un gradient la couvrira très bien, et cela fonctionnera même dans le cas d'un repli.

parce que vous incluez les préfixes vendeur, vous devrez le faire une fois pour chaque préfixe, une fois pour préfixe sans, et une fois pour repli (sans gradient). Pour éviter d'avoir à répéter les autres valeurs, utilisez la main propriétés ¹ au lieu de background abréviation:

#mydiv .isawesome { 
    background-color: #B1B8BD;
    background-position: 0 0;
    background-repeat: no-repeat;

    /* Fallback */
    background-image: url('../images/sidebar_angle.png');

    /* CSS gradients */
    background-image: url('../images/sidebar_angle.png'), 
                      -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background-image: url('../images/sidebar_angle.png'), 
                      -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
    background-image: url('../images/sidebar_angle.png'), 
                      linear-gradient(to bottom, #ADB2B6, #ABAEB3);

    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}

malheureusement cela ne fonctionne pas correctement dans IE comme il utilise filter pour la pente, qu'il peint toujours arrière-plan.

pour travailler autour de la question D'IE vous pouvez placer le filter et l'image de fond en éléments séparés. Cela permettrait d'éviter la puissance de CSS3 arrière-plans multiples, bien que, puisque vous pouvez juste faire la dispersion pour tous les navigateurs, mais c'est un tu devras faire un compromis. Si vous n'avez pas besoin de supporter des versions D'IE qui n'implémentent pas de gradients CSS standardisés, vous n'avez pas à vous inquiéter.

¹_{Techniquement, le background-position et background-repeat les déclarations s'appliquent aux deux couches ici parce que les lacunes sont comblées en répétant les valeurs au lieu de les coller, mais puisque background-position est sa valeur initiale et background-repeat n'a pas d'importance pour un gradient couvrant l'ensemble de l'élément, il ne trop d'importance. Les détails de la façon dont les déclarations de fond en couches sont traitées peuvent être trouvés ici.}