C'est de loin la façon la plus facile et la meilleure pour mettre en œuvre ceci. Il est purement CSS et très très très simple à faire, pas de fichiers supplémentaires - Rien. Ok, ce n'est pas la meilleure façon possible, mais cela fonctionne très bien, très fiable (n'a jamais échoué lors de tests sur de très vieux navigateurs) et très rapide à charger.

Trouvé il y a quelques mois et depuis, il suffit de copier et coller ce code dans votre CSS.

background-image: url(data:image/png;base64,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);

puis ajouter votre arrière-plan couleur

background-color:#0094d0;

Demo: JSFiddle

Source: https://coderwall.com/p/m-uwvg

vous pouvez utiliser un URI de données dans votre CSS pour générer du bruit sans avoir besoin d'un lien vers un fichier image externe.

exemple ici , voir la source pour voir comment il a été fait.

Blog avec le code téléchargeable ici

Oui, il n'y a actuellement aucune approche basée sur les CSS pour les textures de bruit. Si vous êtes déterminé par une approche programmatique (plutôt que basée sur l'image), vous pouvez essayer d'utiliser HTML5 canvas. Il y a un tutoriel ici sur la façon de générer du bruit en utilisant JavaScript --> créer du bruit en HTML5 Canvas

cependant, faire L'approche Canvas se traduira par une expérience beaucoup plus lente pour vos visiteurs, parce que A) JavaScript est un langage interprété, et B) l'écriture de graphiques en utilisant JS est très lente.

donc, à moins que vous n'essayiez de faire un point en utilisant HTML5, Je m'en tiendrais à une image. Il sera plus rapide (pour vous, pour faire et pour vos utilisateurs à charger), et vous aurez un meilleur degré de contrôle sur l'apparence.

pour des raisons de nouveauté, voici un bruit CSS pur sans utiliser un URI de données (bien qu'il semble ne fonctionner que dans webkit):

#box {
  width:250px;
  height:250px;
  position:relative;
  background-size:55px 10px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(1% 21%, closest-corner, rgba(255,0,255,.5), rgba(0,255,255,.5), rgba(0,0,0,1) 1.7%), -webkit-repeating-radial-gradient(51% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,255,1), rgba(0,255,0,1) 10%); 
}
#box::before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:12px 22px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(61% 21%, closest-corner, rgba(255,255,255,1), rgba(0,255,0,.5), rgba(3,0,255,1) 20%),  -webkit-repeating-radial-gradient(91% 51%, closest-corner, rgba(255,255,255,1), rgba(255,255,1,.5), rgba(055,255,255,1) 20%);
  left:0;
  z-index:998;
}
#box::after {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  mix-blend-mode:exclusion;
  background-size:15px 13px;
  background-repeat: repeat;
  background-image: -webkit-repeating-radial-gradient(21% 21%, closest-corner, rgba(255,255,255,1), rgba(0,0,255,.5), rgba(3,0,255,1) 20%);
  left:0;
  top:0;
  z-index:999;
}

<div id="box"></div>

bien que cela ne soit pas considéré comme du vrai bruit, une approche purement CSS3 utiliserait plusieurs sélecteurs répétitifs-linéaires-arrière-plan, qui sont souvent utilisés dans les générateurs de motifs.

Voici quelques exemples:

• http://jsfiddle.net/andrewodri/eMB6E /
• http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients /
• http://lea.verou.me/css3patterns /

avec une bonne combinaison d'arrière-plans, d'angles, de jeux de couleurs et de transparence, un effet sonore raisonnable devrait être réalisable :)

l'Espérance qui vous met dans la bonne direction, de toute façon...

la Création de Textures (Bruit) à l'Aide de Filtres SVG et CSS Dégradés

vous voulez du bruit dans votre pente? Vous avez de la chance!

le bruit de Perlin est un type de dégradé de bruit. La norme SVG spécifie une primitive de filtre appelée <feTurbulence> , qui implémente la fonction Perlin. Il permet la synthèse de textures artificielles comme les nuages ou le marbre-le bruit que vous voulez.

Etape 1: Définir un graphique SVG

crée un petit fichier SVG appelé noise.svg .

<svg
  xmlns='http://www.w3.org/2000/svg'
  xmlns:xlink='http://www.w3.org/1999/xlink'
  width='300' height='300'>

    <filter id='n' x='0' y='0'>
            <feTurbulence
              type='fractalNoise'
              baseFrequency='0.75'
              stitchTiles='stitch'/>
    </filter>

    <rect width='300' height='300' fill='#fff'/>
    <rect width='300' height='300' filter="url(#n)" opacity='0.80'/>
</svg>

Ce graphique définit deux rectangles. Le premier est rempli d'une couleur solide. Le second est translucide, le filtre étant appliqué. Le second rectangle est superposé sur le premier pour produire un effet de bruit.

SVG Options

1. poing et le plus évident est que vous pouvez changer les dimensions du graphique. Cependant, la propriété CSS background-repeat peut être utilisée pour remplir un élément, donc 300×300 devrait suffire.

2. l'attribut type du filtre peut être fractalNoise ou turbulence , qui spécifie la fonction du filtre. Les deux fournissent un visuel différent, mais à mon avis, le filtre de bruit est un peu plus subtil.

3. Le filtre baseFrequency l'attribut peut varier de 0.5 à 0.9 pour fournir une trajectoire à texture fine, respectivement. Cette gamme est visuellement optimale pour filtre à mon avis.

4. le premier rectangle fill peut être modifié pour fournir une couleur de base différente. Plus tard, cependant, nous combinons essentiellement cette couleur avec un gradient CSS translucide, qui définit également une couleur(s). Le blanc est donc un bon point de départ.

5. le second rectangle opacity peut varier de 0,2 à 0,9 pour régler l'intensité du filtre, où un nombre plus élevé augmente l'intensité.

à ce stade, vous pouvez modifier les options mentionnées ci-dessus, définir ce graphique de bruit comme une image de fond via CSS, et l'appeler un jour. Mais si vous voulez un gradient, comme L'OP, passez à L'Étape 2.

Étape 2: Appliquer une pente CSS

utilisant la background-image propriété, vous pouvez définir le graphique SVG noise comme l'arrière-plan sur n'importe quel élément et superposer un gradient . Dans cet exemple, je vais appliquer le graphique du bruit à l'ensemble du corps et superposer un gradient linéaire .

body {
    /* white to black linear noise gradient spanning from top to bottom */
    background:
      linear-gradient(rgba(255,255,255,.5), rgba(0,0,0,.5)),
      url('noise.svg');
}

la fonction linear-gradient () crée une pseudo image, qui est empilée au-dessus du bruit .svg . Résultat est translucide dégradé avec notre bruit montrant à travers.

CSS Options

1. la première, et la plus évidente, est que les couleurs de gradient définies peuvent être changées. Cependant, si vous voulez une couleur unie sans gradient, faites les deux couleurs de point final égaux. L'avantage est que vous pouvez utiliser le même graphique de bruit avec ou sans gradient dans tout un site ou parmi les projets.

2. des images multiples, créées avec les *-gradient() fonctions , peuvent être superposées sur le graphique de bruit et plus de deux paramètres de couleur et les angles peuvent être spécifiés dans une fonction de gradient unique pour fournir toutes sortes de visuels frais.

3. l'opacité des paramètres de gradient-i.e. rgba() et hsla()-peut être augmentée pour intensifier la couleur définie et réduire le niveau de bruit. Encore une fois, 0.2–0.9 est une plage idéale.

Conclusion

il s'agit d'une solution hautement personnalisable et très légère (~400 octets) qui vous permet de définir simplement le bruit de n'importe quelle couleur ou gradient. Bien qu'il existe plusieurs boutons à tourner ici, ce n'est que le début. Il existe d'autres primitives de filtre SVG, telles que <feGaussianBlur> et <feColorMatrix> , qui peut fournir des résultats supplémentaires.

il n'est pas possible (même si c'était le cas, il faudrait des trucs de code pour le faire) de générer des textures de bruit en utilisant CSS seul. Il n'y a pas de nouvelles propriétés CSS3 qui fournissent ce genre d'effet hors de la boîte. Une solution beaucoup plus rapide est d'utiliser un éditeur graphique tel que Photoshop pour faire cela.