Question Comment combiner une image d'arrière-plan et un dégradé CSS3 sur le même élément?


Comment utiliser les dégradés CSS3 pour mon background-color puis appliquer un background-image appliquer une sorte de texture légère et transparente?


1063
2018-03-23 22:30


origine


Réponses:


Arrière-plans multiples!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

Ces 2 lignes sont la solution de repli pour tout navigateur qui ne fait pas de dégradés.  Voir les notes pour empiler des images seulement IE <9 ci-dessous.

  • La ligne 1 définit une couleur d'arrière-plan plate.
  • La ligne 2 définit le repli de l'image d'arrière-plan.

La dernière ligne définit une image d'arrière-plan et un dégradé pour les navigateurs capables de les gérer.

  • La ligne 3 est pour tous les navigateurs relativement modernes.

Presque tous les navigateurs actuels prennent en charge plusieurs images d'arrière-plan et arrière-plans css. Voir http://caniuse.com/#feat=css-gradients pour le support du navigateur. Pour un bon post sur pourquoi vous n'avez pas besoin de plusieurs préfixes de navigateur, voir http://codepen.io/thebabydino/full/pjxVWp/

Empilement de calques

Il est à noter que la première image définie sera la plus haute dans la pile. Dans ce cas, l'image est au sommet du dégradé.

Pour plus d'informations sur la superposition d'arrière-plan, voir http://www.w3.org/TR/css3-background/#layering.

Empilement d'images SEULEMENT (pas de dégradé dans la déclaration) Pour IE <9

IE9 et les versions supérieures peuvent empiler des images de la même manière. Vous pouvez utiliser ceci pour créer une image dégradée pour ie9, bien que personnellement, je ne le ferais pas. Cependant, à noter lorsque vous utilisez uniquement des images, c'est-à-dire que <9 ignorera l'instruction de repli et ne montrera aucune image. Cela n'arrive pas lorsqu'un gradient est inclus. Pour utiliser une seule image de repli dans ce cas, je suggère d'utiliser le merveilleux de Paul irlandais Elément HTML conditionnel avec votre code de secours:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Position de fond, dimensionnement, etc.

D'autres propriétés qui s'appliqueraient à une seule image peuvent également être séparées par des virgules. Si une seule valeur est fournie, elle sera appliquée à toutes les images empilées, y compris le dégradé. background-size: 40px; va contraindre l'image et le dégradé à 40px hauteur et largeur. Cependant en utilisant background-size: 40px, cover; fera l'image 40px et le gradient couvrira l'élément. Pour appliquer uniquement un paramètre à une image, définissez la valeur par défaut pour l'autre: background-position: 50%, 0 0; ou pour les navigateurs qui le supportent utilisation initial: background-position: 50%, initial;

Vous pouvez également utiliser le raccourci d'arrière-plan, mais cela supprime la couleur et l'image de remplacement.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

La même chose s'applique à la position d'arrière-plan, à la répétition d'arrière-plan, etc.


1327
2018-03-30 16:59



Si vous souhaitez également définir position de fond que vous pouvez utiliser pour votre image:

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 mixin MOINS (style bootstrap):

#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
    }
}

75
2017-11-24 16:02



Une chose à réaliser est que la première image d'arrière-plan définie est la plus haute dans la pile. La dernière image définie sera la plus basse. Cela signifie que pour avoir un dégradé d'arrière-plan derrière une image, vous aurez besoin de:

  body {
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

Vous pouvez également définir les positions d'arrière-plan et la taille d'arrière-plan des images. J'ai créé un blog sur des choses intéressantes que vous pouvez faire avec CSS3 gradients


39
2017-12-31 23:51



vous pouvez simplement taper:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);


16
2017-12-21 18:35



J'avais une implémentation où je devais aller un peu plus loin dans cette technique, et je voulais donner un aperçu de mon travail. Le code ci-dessous fait la même chose mais utilise SASS, Bourbon et un sprite d'image.

    @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 Bourbon s'occupent du code croisé, et maintenant tout ce que j'ai à déclarer est la position du sprite par bouton. Il est facile d'étendre ce principe pour les boutons actifs et les états de survol.


13
2017-10-10 17:08



ma solution:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

13
2018-03-15 12:39



J'utilise toujours le code suivant pour le faire fonctionner. Il y a quelques notes:

  1. Si vous placez l'URL de l'image avant le dégradé, cette image sera affichée au dessus le dégradé comme prévu.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

  1. Si vous placez le dégradé avant l'URL de l'image, cette image sera affichée en dessous de le gradient.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

Cette technique est la même que nous avons plusieurs images de fond comme décrit ici


8
2017-10-04 07:21



J'ai fait un exemple avec enjoycss

enter image description here

http://enjoycss.com/5q#background

dans l'éditeur enjoycss vous pouvez conbiner n'importe quel nombre d'arrière-plans, linéaire, répété-linéaire, radial, répétitif-radial, images, couleurs

vous ajustez vos arrière-plans avec l'interface graphique et il génère automatiquement le code

le code est ici http://enjoycss.com/5q/code/0/background#background


5
2018-01-12 15:24