Возможно ли создать фоновую текстуру с чистым CSS (без использования изображения), который выглядит как старая бумага, например. как это: http://i.stack.imgur.com/kb0Zm.jpg
Я знаю, что существуют ограничения, текстура не должна быть такой сложной, как в примере.
Есть ли способ сделать это в CSS?
Лучшее, что я нашел в 2016 году, был этот API, который создает изображение текстуры шума. Он не основан на умном CSS3, но я просто публикую это, так как ни один из других ответов в любом случае не достигает того, чего хочет ОП.
http://www.cssmatic.com/noise-texture
Обратите внимание, что сайт имеет неправильный выходной код CSS. Это должно быть что-то вроде:
body {
background-image : url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=5c5c5c&density=13&opacity=62);
}
Любой может предложить альтернативные параметры для этого вызова API, которые больше похожи на бумагу. Я обновлю свой ответ, если найду хороший.
(источник: thumbr.it)
На моем личном сайте он выглядит прилично и показывает, насколько неестественно чистый белый цвет и насколько неудобен для человеческих глаз: http://netgear.rohidekar.com/inventory/books.html
Как сказано здесь (Как создать фон текстурной бумаги с помощью CSS без изображения). Дастин сказал, что нет "текстурной" функции CSS. однако, если вы используете CSS3, вы можете сделать довольно интересные трюки, такие как градиенты или тени, чтобы сделать некоторые аккуратные фоны.
Мне не нравится мысль о чем-то невозможном. Все возможно!! В этом случае его просто очень сложно: D Если вы сделаете в этом примере 478800 <div> элементов (600x798 пикселей в изображении вашего примера) и относитесь к ним как к пикселям и, наконец, установите их абсолютными. Вы можете получить точную копию своего изображения.
<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
В этом случае даже можно использовать меньше элементов, но вам также нужно работать с z-индексами. Боль в попке: D
Нет, лучше всего использовать CSS - это градиент. http://www.colorzilla.com/gradient-editor/