Est-il possible de combiner une image de fond et les dégradés CSS3?

Question

Je veux utiliser les dégradés CSS3 pour ma background-color , puis appliquer un background-image d'appliquer une sorte de lumière transparent texture.

Est-ce possible?

Answer 1

Oui, vous le pouvez.

background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #6cab26, #6ceb86); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL),    -moz-linear-gradient(top, #6cab26, #6ceb86); /* FF3.6+ */
background-image: url(IMAGE_URL),     -ms-linear-gradient(top, #6cab26, #6ceb86); /* IE10 */
background-image: url(IMAGE_URL),      -o-linear-gradient(top, #6cab26, #6ceb86); /* Opera 11.10+ */
background-image: url(IMAGE_URL),         linear-gradient(to bottom, #6cab26, #6ceb86); /* W3C */

Ces 2 lignes sont la solution de repli pour un navigateur qui ne prend pas en faire des dégradés. Voir les remarques pour l'empilage des images qu'avec IE < 9 ci-dessous.

• La ligne 1 indique une télévision couleur d'arrière-plan.
• Ligne 2 définit l'image d'arrière-plan de secours.

Le reste de définir une image d'arrière-plan et de dégradé pour certains navigateurs.

• La ligne 3 est pour les vieux navigateurs webkit.
• La ligne 4 est pour les nouveaux navigateurs webkit.
• La ligne 5 est pour Firefox 3.6 et.
• La ligne 6 est pour Internet Explorer 10.
• La ligne 7 est pour Opera 11.10 et.
• La ligne 8 est-ce qu'un jour tous les navigateurs espérer l'utiliser.

Voir http://www.w3.org/TR/css3-background/#layering pour plus d'informations à ce sujet.

Voir aussi http://css3please.com pour la croix-navigateur css3 template. Actuellement, il ne vous autorise pas à faire de multiples horizons avec des dégradés, mais il vous donne les préfixes de navigateur et est maintenu à jour.

L'empilement des images UNIQUEMENT (pas de dégradés de dans la déclaration) Pour IE < 9

IE9 et peut empiler des images de la même manière. Vous pouvez l'utiliser pour créer un gradient de l'image pour ie9, bien que personnellement, je ne le ferais pas. Toutefois à noter lors de l'utilisation de seulement les images, ie < 9 ignore les secours déclaration et ne présenter aucune image. Cela ne se produit pas lorsqu'un gradient est inclus. L'utilisation d'une seule image de secours dans ce cas, je suggère l'utilisation de Paul Irish est merveilleux Conditionnelle de l'élément HTML avec votre secours code:

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

Fond de position, de taille etc.

D'autres propriétés qui s'appliquent à une seule image peut également être séparés par une virgule. Si seulement 1 valeur est fournie, qui sera appliquée à tous les empilées les images, dont le dégradé. background-size: 40px; permettra de contraindre à la fois l'image et le gradient de 40px la hauteur et la largeur. Toutefois, l'utilisation d' background-size: 40px, cover; l'image pour la rendre 40px et le gradient de convertir l'élément.

La même chose s'applique à background-position, background-repeat, etc.

Answer 2

Si vous aussi vous souhaitez définir de fond de 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
    }
}

Answer 3

Une chose à réaliser est que le premier définit l'image de fond est tout en haut dans la pile. La dernière image définie sera le dernier. Cela signifie que, pour avoir un dégradé d'arrière-plan derrière une image, vous devez:

body {
 background-image: 
url("/images/myImage.png");
 -webkit-gradient(linear, left top, left bottom,
à partir de(en rouge),
(jaune);
-moz-linear-gradient(top,
 rouge, jaune;
}

Vous pouvez également définir l'arrière-plan des positions de fond et de la taille des images. J'ai mis en place un blog à propos de certaines choses intéressantes que vous pouvez faire avec les dégradés CSS3: http://css3wizardry.com/2010/08/19/css3-gradients-and-patterns/

Answer 4

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.

Answer 5

J'ai fait un exemple avec enjoycss

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

dans enjoycss éditeur, vous pouvez combiner ds n'importe quel nombre de milieux, linéaire, de le répéter-linéaire, radial, de le répéter-radial,des images,des couleurs

vous réglez vos origines avec une interface graphique et il génère automatiquement le code

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