• ベストアンサー

CSSで背景画像に指定されている画像を抽出して、グレースケールに変換っ

CSSで背景画像に指定されている画像を抽出して、グレースケールに変換って可能でしょうか?できれば、JavaScriptで行いたいのですが、もし、グレースケールに変換方法をご存知の方がいればご教授いただけないでしょうか? また、JavaScriptで無理ならば、どの言語ならば可能かも教えていただければ幸いです。知識が無くて誠に申し訳ございません。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

CSSで背景画像に指定されている画像を抽出 =>自身のサイト内のページなら、iframeにでもロードして、javascriptで 背景に設定されている画像ファイルのuriを全てリストアップできますが、 ダウンロードはできません。  PHPとかのサーバープログラムも使えば他のサイトのページでも、できますが、 おそらく、あなたは、そおいうのを望んでいるわけじゃないでしょう。 幸せになるためには、 Firefoxというブラウザーと、FireBugというツールをダウンロードして、 欲しい背景画像を見つけて、自分でダウンロードしましょう。 そして、GIMPとかペイントXXとかフォトXXといったレタッチソフトで、グレースケール の画像に変更しましょう。(※一応、著作権には気を付けてね) ちなみに、CSSでカラープロファイルまで定義可能になるのは、ずーと先のようです。

stylehorse
質問者

お礼

ご回答ありがとうございます。 確かに、PHPなどのサーバサイドを用いれば、なんとかなるだろうなぁーというのは感じていました。 CSSで背景に指定している画像をJavaとかC#などでグレースケールに変換できるみたいですね。 もうちょっと調べてみます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • cssでの画像グレースケール指定が効かない

    現在cssにて、特定の画像をグレースケール表示にする指定をしているのですが、Androidの機種にてこのcssが効かない事が判明しました。 (SONY NW-F805 ブラウザはこの機種に入っているデフォルトの「ブラウザ」というものです。) あまりcssに詳しくなく、どなたか対応策ご存知の方、ご教示願えませんでしょうか。 cssのパスの間違いが無い事は確認しております。 cssの指定 img.gray { -webkit-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; } html内での指定 <img src="sample.jpg" width="60" height="80" alt="sample" class="gray" /> お手数をおかけしますが、よろしく御願いいたします。

    • 締切済み
    • CSS
  • グレースケール画像の画素値を得る

    OpenCVを使わずにC言語で、グレースケール画像を読み込んで、各画素をそれに対応する配列に格納するプログラムを作りたいと思っています。 しかし、C言語で画像を読み込む方法や、各画素の画素値を得る方法がわかりません。どなたかご存知の方がいらしたら、教えてください。宜しくお願いします。

  • 4bit グレースケールPNGに変換できるソフト

    はじめて投稿します。よろしくお願いします。 4bitグレースケールのpngに変換できるソフトを探しています。 いまbmp画像を4bitグレースケールのpng画像に変換できるソフトを探しているのですが、なかなか見つかりません。 私が探した中で「Tinuous」というソフトがありましたが、グレースケールにするとビット深度まで設定できる仕様であはりあせんでした。 誰か知っている人がいたら教えてください。 お願いします。

  • CSSで背景画像指定

    どなたかアドバイスお願いします。 CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。 テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。 CSSのみでのレイアウトの場合はHTMLタグの中の要素が空になってしまう場合 は、どのように対処すればよろしいのでしょうか?

    • ベストアンサー
    • CSS
  • 線画を印刷用のグレースケールに

    鉛筆の繊細な線画等を、挿絵(商業印刷)にして入れたいと思っています。普通タイプのEPSONのスキャナ(GT-F600)で取り込み、PhotoshopCS3で加工します。入稿はグレースケールの350dpiという指定です。 ●スキャン時にグレースケールにした方がいいのでしょうか?それともカラーでスキャンしてからPhotoshopCS3でグレースケールにした方がいいのでしょうか? ●スキャンした画像は背景が薄いグレーですが、ここを白くするにはどのようにしたら良いのでしょうか? ぜひよろしくお願い致します!

  • グレースケールに変換できるフリーソフトってありますか

    画像をパワーポイント上でグレースケールに変換すると赤と青が同じ濃度になってしまします。 赤→緑→青のスケールを白→黒のスケールに変換できるようなフリーソフトってありますか?

  • 【photoshop5.5】画像変換(カラーとグレースケールの混在)

    はじめまして。カラー(CMYK)画像の一部をグレースケールに変換したいのですが、どうしたらいいのでしょう?パスを切ってみたりといろいろしてみたのですが、全てが変換されてしまし上手くいきません。どなたか御存じの方教えてくださいm(__)m

  • CSSの重なり順って指定できますでしょうか?(画像です)

    現在CSSをコツコツと勉強中なのですが、壁にぶつかってしまいました・・・。 CSSで背景画像を指定したのですが、これらの画像の重なり合う順番って構うことは出来ますでしょうか? 例えばですが、右に犬小屋の画像、左に犬の画像がありCSSで背景として重なり合わせた場合、犬小屋の上に犬が乗っかるようにしたいのです。(物凄い例ですのでCSSを使わなかったらとは言わないで下さいね) サイトをウロウロとしていたところ、Zインデックスという存在を知ったのですが、使い方がよく分からないというか、これで指定できるものなのでしょうか? 当たり前の質問で申し訳ないのですが、ご存知に方がおられましたらアドバイスいただけたら幸いです。 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • RBG画像をグレースケールに変換する時の不具合について

    フォトショップを使用しています。RBG画像を「イメージ」→「モード」→「グレースケールに変換する」という方法でグレーにしたいのですが、レイヤーのカラー合成に影響が出る、という表示が出ます。出来ればレイヤーは統合しないままで、グレースケールにしたいのですが、大きな不具合等生じるでしょうか?知っていらっしゃる方がおられましたら教えて頂けたらと思います。

  • CSSで「html」にも背景指定をするのはどのような場合?

    CSSで「html」にも背景指定をするのはどのような場合? CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか? もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる?と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。

    • ベストアンサー
    • CSS