css - CSS: テクスチャ背景の作成

Question

私は現在、十分に速くロードされるサイトの画像背景を設定するのに苦労しています. データ URL 画像と最適化された画像を使用しましたが、背景画像がまだ非常に大きいため、ページの読み込みに時間がかかります。下の画像のようなテクスチャ背景色をCSSで作ることはできますか？ここに例があります

私はそれを試してみましたが、これに一致することができませんでした:

ここに画像の説明を入力

score 89 · Accepted Answer

最新の CSS3 テクノロジーにより、テクスチャ付きの背景を作成できます。これをチェックしてください：http://lea.verou.me/css3patterns/#

しかし、それはまだ非常に多くの面で制限されています。また、ブラウザのサポートもそれほど準備ができていません。

あなたの最善の策は、小さなテクスチャ画像を使用して、その背景を繰り返すことです。ここで、すぐに使用できる素敵なテクスチャイメージを取得できます。

score 27 · Accepted Answer

可能であれば、画像を小さな断片にスライスして、繰り返してみる必要があります。その画像を 101x101px の画像にスライスしました。

BGタイル

CSS:

body{
  background-image: url(SO_texture_bg.jpg);
  background-repeat:repeat;
}

しかし、場合によっては、画像をより小さなものにスライスできないことがあります。その場合、画像全体を使用します。しかし、Mustafa Kamal が言及したような CSS3 メソッドを使用することもできます。

幸運を願っています。

4 に答える 4