Texture d'arrière-plan vieux papier avec juste css

Est-il possible de créer une texture de fond avec de la pure CSS (sans l'aide d'une image) qui ressemble à un vieux papier, par exemple comme ceci:
http://i.stack.imgur.com/kb0Zm.jpg

Je " conscient qu'il y a des limites, la texture n'a pas besoin d'être aussi complexe que l'exemple.

Est-il un moyen de le faire en CSS?

source d'informationauteur Macman

  1. 2

    Image d'arrière-plan générateur de site

    Le meilleur que j'ai trouvé en 2016 a été cette API qui crée une texture de bruit de l'image. Elle n'est pas basée sur intelligent CSS3 mais je suis en train de poster ceci car aucune des autres réponses réaliser ce que l'OP veut de toute façon.

    http://www.cssmatic.com/noise-texture

    Note le site a la mauvaise sortie de code CSS. Il doit être quelque chose comme:

    body {
    background-image : url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=5c5c5c&density=13&opacity=62);
}

    Tout le monde est bienvenu de proposer d'autres paramètres pour que les appels de l'API qui ressemblent plus à du papier. Je vais mettre à jour ma réponse si je viens avec un bon.

    http://api.thumbr.it/whitenoise-600x200.png?background=f8faebff&noise=6c702d&density=17&opacity=15

    Il semble décent sur mon site personnel, et vous montre juste la façon naturelle d'un blanc pur est et comment mal à l'aise c'est sur les yeux de l'homme: http://netgear.rohidekar.com/inventory/books.html

  2. 1

    Que la réponse ici ( Comment créer une texture de fond de papier à l'aide de CSS sans images ), Dustin dit, il n'y a pas de "texture" fonctionnalité CSS. toutefois, si vous êtes en utilisant CSS3, vous pouvez faire quelques jolis trucs cool comme les gradients ou d'observation à faire bien des milieux.

  3. 0

    Pas, du mieux que vous pouvez faire avec CSS est certains de gradient. http://www.colorzilla.com/gradient-editor/

  4. 0

    Je n'aime pas l'idée de quelque chose de ne pas être possible. Tout est possible!! Dans ce cas c'est juste très dur 😀 Si vous voulez faire dans cet exemple 478800 <div> éléments (600x798 pixels dans l'image d'exemple) et de les traiter comme des pixels et enfin de leur position absolue. Vous pouvez obtenir une copie exacte de votre image. 

    <div style="top: 0; left: 0; posistion: absolute; width: 1px; height: 1px; background-color: #112233;"></div>
<div style="top: 0; left: 1; posistion: absolute; width: 1px; height: 1px; background-color: #112433;"></div>
<div style="top: 0; left: 2; posistion: absolute; width: 1px; height: 1px; background-color: #111234;"></div>
.. etc

    Dans ce cas, il est même possible d'utiliser moins d'éléments, mais vous avez à travailler avec des z-index aswell.. Douleur dans le cul 😀