こんにちは。
WEbサイトの背景画像にメッシュ画像を被せる方法を探しています。
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ベストアンサー
- 回答日時:
該当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^)/
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- 教えて!goo 「教えて!goo」や「Yahoo知恵袋」に投稿する際の画像についてお聞きします。 2 2023/05/23 12:53
- PDF 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 1 2022/03/31 19:09
- その他(IT・Webサービス) 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 3 2022/03/31 19:11
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- その他(ブラウザ) Webサイトの画像ダウンロードブロックにかなり強い(どんなサイトでも長押し画像ダウンロードができる) 2 2022/09/12 19:24
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
ブラウザによって、画面表示の...
-
iframe内をクリックさせない方...
-
要素の幅をいろんな写真の幅に...
-
WEbサイトの背景画像にメッシ...
-
同じ画像 複数回使用
-
lightbox2で画像を天地左右中央...
-
IMGタグで画像の繰り返し使用は…
-
【至急お助け!】チェックボッ...
-
htmlかcssで背景の白い枠をなく...
-
画像の上に
-
【Webサイト】画像が小さく表示...
-
画像上に文字を表示するとiPhon...
-
画像とその下にあるテキストの...
-
ページの上下に白い横線が入る
-
CSSでliのマーカーの位置を変更...
-
背景画像がずれる現象について
-
フッターの背景に色を指定した...
-
背景画像が半分しか表示されない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
iframe内をクリックさせない方...
-
【Webサイト】画像が小さく表示...
-
同じ画像 複数回使用
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
background-sizeでcontainする...
-
lightbox2で画像を天地左右中央...
-
コーディング中、右側に謎の余...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
背景画像をリピートさせない方...
-
CSSで背景画像をランダムに表示...
-
フッターの背景に色を指定した...
-
ページの上下に白い横線が入る
おすすめ情報