web-dev-qa-db-fra.com

Image de fond transparent avec un dégradé

Aujourd'hui, je concevais un arrière-plan PNG transparent qui ne s'asseoirait qu'en haut à gauche d'un div, et le reste de la div conserverait un arrière-plan dégradé pour toutes les zones transparentes du PNG, et le reste du div lui-même.

Il pourrait être préférable d'expliquer à travers le code que je pensais pouvoir fonctionner:

#mydiv .isawesome { 
    /* Basic color for old browsers, and a small image that sits in the top left corner of the div */
    background: #B1B8BD url('../images/sidebar_angle.png') 0 0 no-repeat;

    /* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
    background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ADB2B6', endColorstr='#ABAEB3',GradientType=0 );
}

Ce que j'ai découvert, c'est que la plupart des navigateurs choisissent l'un ou l'autre - la plupart choisissant le dégradé depuis le bas du fichier CSS.

Je sais que certains des gars d'ici diront "appliquez simplement le dégradé au PNG que vous créez" - mais ce n'est pas idéal car le div maintiendra une hauteur dynamique - parfois très court, parfois très grand. Je sais que ce gradient n'est pas essentiel mais j'ai pensé qu'il valait peut-être la peine de vous demander ce que vous en pensiez.

Est-il possible d'avoir une image d'arrière-plan, tout en gardant le reste de l'arrière-plan en dégradé?

cssimagebackgroundcss3gradient
25
Will D. White

Gardez à l'esprit qu'un dégradé CSS est en fait un valeur d'image , pas une valeur de couleur comme certains pourraient s'y attendre. Par conséquent, cela correspond à background-image spécifiquement, et non background-color, ou l'intégralité du raccourci background.

Essentiellement, ce que vous essayez vraiment de faire est de superposer deux images d'arrière-plan: une image bitmap sur un dégradé. Pour ce faire, vous spécifiez les deux dans la même déclaration, en les séparant à l'aide d'une virgule. Spécifiez d'abord l'image, puis le dégradé. Si vous spécifiez une couleur d'arrière-plan, cette couleur sera toujours peinte sous l'image la plus basse, ce qui signifie qu'un dégradé la couvrira très bien, et cela fonctionnera même en cas de repli.

Étant donné que vous incluez des préfixes de fournisseurs, vous devrez le faire une fois pour chaque préfixe, une fois pour prefixless et une fois pour repli (sans le dégradé). Pour éviter d'avoir à répéter les autres valeurs, utilisez les propriétés longues1 au lieu du raccourci background:

#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 car il utilise filter pour le dégradé, qu'il peint toujours sur l'arrière-plan.

Pour contourner le problème d'IE, vous pouvez placer le filter et l'image d'arrière-plan dans des éléments séparés. Cela éliminerait la puissance de plusieurs arrière-plans CSS3, car vous pouvez simplement superposer tous les navigateurs, mais c'est un compromis que vous devrez faire. Si vous n'avez pas besoin de prendre en charge les versions de IE qui n'implémentent pas de dégradés CSS standardisés, vous n'avez rien à craindre.

1Techniquement, le background-position et background-repeat les déclarations s'appliquent aux deux couches ici car les lacunes sont comblées en répétant les valeurs au lieu d'être bloquées, mais puisque background-position est sa valeur initiale et background-repeat n'a pas d'importance pour un dégradé couvrant tout l'élément, cela n'a pas trop d'importance. Les détails de la façon dont les déclarations en arrière-plan en couches sont traitées peuvent être trouvés ici .

41
BoltClock

Vous pouvez utiliser Transparence et dégradés . Les dégradés prennent en charge la transparence. Vous pouvez l'utiliser, par exemple, lors de l'empilement de plusieurs arrière-plans, pour créer des effets de fondu sur les images d'arrière-plan.

background: linear-gradient(to right, rgba(255,255,255,0) 20%,
              rgba(255,255,255,1)), url(http://foo.com/image.jpg);

enter image description here

8
J.C. Gras

L'ordre de l'image et du dégradé est très CLÉ ici, je veux que ce soit clair. Le combo dégradé/image fonctionne mieux comme ceci ...

background: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

background-image Fonctionnera également ...

background-image: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url('../images/plus.png');

le gradient doit venir en premier ... pour aller au sommet. La clé absolue ici, cependant, est que le dégradé utilise au moins 1 couleur RGBA ... la ou les couleurs doivent être transparentes pour laisser passer l'image. (rgba(20,20,20,***0.5***)). mettre le dégradé en premier dans votre css place le dégradé au-dessus de l'image, donc plus le paramètre alpha est bas sur vous RVB plus vous voyez l'image.

Maintenant, d'autre part, si vous utilisez l'ordre inverse, le PNG doit avoir des propriétés transparentes, tout comme le dégradé, pour laisser transparaître le dégradé. L'image va en haut donc votre PNG doit être enregistré en 24 bits dans Photoshop avec des zones alpha ... ou 32 bits dans des feux d'artifice avec des zones alpha (ou un gif je suppose ... barf), afin que vous puissiez voir le dégradé en dessous. Dans ce cas, le dégradé peut utiliser HEX RGB ou RGBA.

La principale différence ici est le look. L'image sera beaucoup plus vibrante en haut. En dessous, vous avez la possibilité de régler les valeurs RGBA dans le navigateur pour obtenir l'effet souhaité ... au lieu de modifier et d'enregistrer dans les deux sens à partir de votre logiciel de retouche d'image.

J'espère que cela aide, excusez ma simplification excessive.

8
Brendan Wolfe

Ceci est possible en utilisant plusieurs syntaxes d'arrière-plan:

.example3 {
    background-image: url(../images/plus.png), -moz-linear-gradient(top,  #cbe3ba,  #a6cc8b);
    background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}

J'ai lu à ce sujet sur Voici une solution .

0
Chris Peckham