HTMLでbackground-imageの上に画像ファイルを半透明にして、重ねる方法はありませんか?言葉足らずですみません。もしかしてCSSかjavascriptを使うかもしれません。

サンプルソースでわかるHPがあれば助かるのですが…

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/05/07 03:50:42
  • 終了:--

回答(3件)

id:Kityo No.1

キチョー id:Kityo回答回数159ベストアンサー獲得回数122005/05/07 04:19:06

ポイント20pt

 回答を入力している最中に「キャンセル」されてしまいました。

 それはさておき…。

http://www.netpassport.or.jp/~wkityo/

キチョーのWebページ

 最初から半透明な画像ファイルを用意すれば良いのでは?…と思います。

 上記URLは私のWebページです。

 「#00AFAF」色のbgcolorの上に四角くない画像が浮かんでいますが、これは「透過gif」ファイルです。

 実際には四角い画像ファイルなのですが、周りの部分を「透明」にして雲形っぽく見せています。

 普通の画像に「透明」色のメッシュをかければ、メッシュが充分に細かければ、人間の目には半透明に見えると思います。

 ちょうど、上記URLに見本がありました。

 具体的に半透明に見える透過gifファイルの作り方のHowToみたいなページがありました。

 Paint Shoをお持ちなら、この辺りを試してみては?

http://computers.yahoo.co.jp/download/vector/all.html

yahoo!コンピュータ - ソフトウエアダウンロード

 私なら、このくらいのヒントがあれば、素朴な単機能なそしてありがたいことに無料又はそれに近いようなツールを2つくらい探し出して組み合わせて使うと思います。

id:Manami2005

やはり、私の説明がへただったようです。すいません。

2005/05/07 04:46:13
id:kawai0000 No.2

kawai0000回答回数95ベストアンサー獲得回数02005/05/07 04:24:47

ポイント20pt

http://www.tagindex.com/stylesheet/filter/alpha.html

スタイルシート[CSS]/フィルタ/半透明のグラデーションをかける - TAG index

使い方↓

<img src=”*.png” style=”filter:Alpha(opacity=30)”>

id:Manami2005

やはりスタイルシートでしたか…

2005/05/07 04:47:21
id:kinop No.3

kinop回答回数325ベストアンサー獲得回数22005/05/07 04:44:54

ポイント20pt

http://fc2.com/

FC2 無料ホームページ アクセス解析 ブログ レンタルサーバー 等

URLダミーです。

レイヤー挿入機能を使い、画像も、透明度を50%くらいにして、書式をPNGにすると出来るのじゃないかと思います。

id:Manami2005

なるほど。

2005/05/07 04:47:49
  • id:wakan
    MSIE 使ってませんか?

    回答つけようと思ったら、もう終了って……
    時々思うんだけど、終了するのが早すぎる人がけっこういる。

    たぶん、コレが正解だとおもう。
    MSIE は、半透明の画像を表示できないんです。
    今度出る Ver. 7.0 からの対応になるそうです。
    Opera も Firefox も Mozilla も、とっくに対応済なのにね……

    というわけで、すべての閲覧者に同じような表示を望むなら、
    当面は半透明の画像の使用を避けるしかないです。
  • id:smoking186
    Re:MSIE 使ってませんか?

    IE6でも一応は可能なようです。

    1. 透過pngを使う
    1-1. http://www.minc.ne.jp/~konda/new/png/png-a-la-carte.html
    1-2. http://www.afternooncafe.jp/archives/04_05_27_gear.html

    2. filterでIEだけ(2.の人と同じ)
    2-1. http://www.afternooncafe.jp/archives/04_05_28_gear.html
  • id:flash2040
    Re(2):MSIE 使ってませんか?

    >IE6でも一応は可能なようです。
    IEであれば、DynamicHTMLを使う手もあるんじゃないかと。
    でも、質問者の方見てもらえるかなぁ・・・。
    http://ha2.seikyou.ne.jp/home/jiji/javascript/js_045.htm

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません