Comment puis-je combiner un background-image et CSS3 gradient sur le même élément?

Si vous aussi vous souhaitez définir de fond pour votre image, que vous pouvez utiliser ceci:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

ou vous pouvez également créer un MOINS mixin (bootstrap style):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

OriginalL'auteur Tamás Pap

J'ai eu une mise en œuvre à l'endroit où je devais prendre cette technique un peu plus loin, et je voulais exposer mon travail. Le code ci-dessous fait la même chose, mais utilise SASS, de Bourbon, et une image sprite.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS et de Bourbon prendre soin de la croix-navigateur de code, et maintenant tout ce que j'ai à déclarer est le sprite position par bouton. Il est facile d'étendre ce principe pour les boutons actifs et les états stationnaire.

OriginalL'auteur coreballs

J'ai essayé de faire la même chose. Tandis que la couleur de fond et image de fond d'écran existent sur des calques distincts à l'intérieur d'un objet, ce qui signifie qu'ils peuvent co-exister -- CSS gradients semblent co-opt, en arrière-plan de l'image de la couche.

De ce que je peux dire, border-image semble avoir un plus grand soutien de plusieurs formations, et donc peut-être que c'est une approche alternative.

http://articles.sitepoint.com/article/css3-border-images

Mise à JOUR: UN peu plus de recherche. Semble Petra Gregorova a quelque chose à travailler ici --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

OriginalL'auteur Alex

Si vous avez pour obtenir des dégradés et des images d'arrière-plan à travailler ensemble dans IE 9 (HTML 5 & HTML 4.01 Strict), ajouter l'attribut suivant la déclaration de votre classe css et il devrait faire l'affaire:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Avis que vous utilisez le filter attribut et qu'il y a deux instances de progid:[val] séparés par une virgule avant de fermer la valeur d'un attribut avec un point-virgule. Voici la violon. Notez également que lorsque vous regardez le violon, le gradient s'étend au-delà des coins arrondis. Je n'ai pas de correctif pour que les autres n'utilisant pas des coins arrondis. Notez également que lors de l'utilisation d'un chemin d'accès relatif à la src [IMAGE_URL] attribut, le chemin est relatif au document de la page et non pas le fichier css (Voir source).

Cet article (http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/) est ce qui m'amènent à cette solution. C'est assez utile pour IE spécifiques CSS3.

OriginalL'auteur KSev

Pour mon responsive design, ma boîte de dépôt flèche vers le bas sur le côté droit de la boîte (vertical accordéon), a accepté de pourcentage comme position. D'abord la flèche vers le bas a été "position: absolute; right: 13px;". Avec 97% de positionnement, il a travaillé comme un charme comme suit:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

P. S. Désolé, je ne sais pas comment gérer les filtres.

OriginalL'auteur mugé

Comme une méthode sûre façon, vous pouvez simplement faire une image de fond c'est-à-dire 500x5 pixels, dans votre css utilisation:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

Où xxxxxx correspond à la couleur qui correspond à la finale de dégradé de couleur.

Vous pouvez également résoudre ce vers le bas de l'écran et d'en faire correspondre la première couleur du dégradé.

OriginalL'auteur Epicus