web-dev-qa-db-ja.com

ちょうどcssの古い紙の背景テクスチャ

古い紙のような純粋なCSS（画像を使用しない）で背景テクスチャを作成することは可能ですか？このように： http://i.stack.imgur.com/kb0Zm.jpg

制限があることは承知しています。テクスチャは例ほど複雑である必要はありません。

CSSでこれを行う方法はありますか？

cssbackgroundtextures
18
Macman

背景画像生成サイト

2016年に見つけた最高のものは、ノイズテクスチャイメージを作成するこのAPIでした。それは巧妙なCSS3に基づいていませんが、とにかくOPが望むものを達成する他の回答がないため、私はこれを投稿しています。

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呼び出しの代替パラメーターを提案することができます。良い答えが出たら、答えを更新します。

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

それは私の個人サイトではまともなように見え、純粋な白がいかに不自然で、人間の目にどれほど不快であるかを示しています。 http://netgear.rohidekar.com/inventory/books.html

3
Sridhar Sarnobat

ここで答えたように（ 画像なしのCSSを使用してテクスチャペーパーの背景を作成する方法 ）ダスティンは言った、「テクスチャ」CSS機能はありません。ただし、CSS3を使用している場合は、グラデーションやシャドーイングなどのかなりクールなトリックを実行して、背景をきれいにすることができます。

2
Milche Patern

できないことを考えたくない。すべてが可能です！！この場合、それは非常に難しい：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

1
Harmen de Vries

いいえ、CSSで実行できる最善の方法は勾配です。 http://www.colorzilla.com/gradient-editor/

0
MadCom