WEｂサイトの背景画像にメッシュ画像を被せる方法

こんにちは。
WEｂサイトの背景画像にメッシュ画像を被せる方法を探しています。

1024×644　72dpi 110kbくらいの画像を全画面で表示すると荒れるので、それを・の小さな画像（下のサイトの例では　01.png）を上に敷き詰めると荒れが目立たなくなり、明瞭に見えるのです。

http://tympanus.net/Tutorials/FullscreenSlidesho …

このサイトで使っているのが見本です。画像を拡大するとメッシュが見えます。

こんな記述が見つかりました。

.vegas-overlay {
background:transparent url(overlays/01.png);
opacity:0.5;
z-index:-1;


これを自分のサイトで実現したいのですが、書いてあるところがほとんどないので、探しています。

どこかに作り方の説明が書いてあるところはないでしょうか。
いろいろ探してみても見つかりませんでした。

教えていただけると助かります。

No.1 ベストアンサー 回答者： torayoshi 回答日時： 2016/02/21 22:20

該当CSSは「jquery.css」ですね。

.vegas-overlay {
background:transparent url(02.png);
opacity:0.5;
z-index:-1;
}
.vegas-background {
image-rendering: optimizeQuality;
-ms-interpolation-mode: bicubic;
z-index:-2;
}

ドット背景は実際には「02.png」が使われているもよう。
opacityで透明度指定（0.5は透明度50%）

ドット背景と画像のレンダリングに関するCSSは、
image-rendering
https://developer.mozilla.org/ja/docs/Web/CSS/im …

HTML（提示された参考サイトから抜粋）
<img src="New 20York_files/01.jpg" style="position: fixed; left: -79.323px; top: 0px; display: block; width: 1432.65px; height: 901px; bottom: auto; right: auto;" class="vegas-background">
<div style="margin: 0px; padding: 0px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;" class="vegas-overlay"></div>

一番手っ取り早い方法は、提示された参考サイトから拝借すれば実装できますね。

サンプルを作ってみました。
http://www13.plala.or.jp/torayoshi/sample/a.html

この回答へのお礼

torayoshiさん

うわあ、サンプルまで作っていただき、感激です。

これを私が写してできるかどうか、今からやってみます。

後でまたご報告させていただきます。

ありがとうございます。＼(^o^)／

お礼日時：2016/02/22 21:14