- 締切済み
画像の指定色を透過するタグ
<img src="画像のアドレス" style="filter:chroma(color=透過色)"> このタグを自分のＨＰに使っています。その画像の形式はＰＮＧです。 ですか、ちょっとネットサーフィンしていたら、あるＨＰに 『ＰＮＧ画像を透過した画像をちゃんと表示できるブラウザはまだ少ない』（うろ覚えです；；）という言葉が書かれていました。 少し気になっているのですが、このタグを使って（ＰＮＧ）いたら、 すべての観覧者サンがちゃんと正常に観覧できてないんですかね？？ ちなみに私のＰＣではちゃんと透過されて表示されています。 このことについて分かる人がいたら是非教えてください!!
- kurino0704
- お礼率0% (5/610)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
ＰＮＧの機能ではなくて、ＩＥのフィルタ機能で表示していると思われます。 なので、ＩＥを使用している人からは、同じように表示されていると期待できます。 逆にＩＥ以外のブラウザを使用している人は、透過されずに表示されていると思われます。
関連するQ&A
- 背景を透過するタグについて
こんばんわ。タイトル通り【背景を透過するタグについて】質問があります。よろしくお願いいたします。 <style type="text/css"> <!-- .box1{/*テキストスペース*/ … … width : 157px; background-color : #ffffff; filter : chroma(color=#ffffff); } </style> と、スタイルシートで色々と指定しております。 このテキストスペースの背後に画像があるので、背景を透かせたく、【chroma】を使って指定した色（白）を透かせましたが、 これだとまったく透明になってしまうので…できれば <table style="filter:Alpha(opacity=20)"> のように、透過の度合いを指定できるようになりませんでしょうか？ ↑テーブルでの透過の仕方しか分からず、上のテキストスペースで同じようなことをしたいのですが…。可能でしょうか？ お手数ですが、宜しければ教えていただけるととても助かります。 お願いいたします。
- ベストアンサー
- HTML
- スタイルシート filter
#title{ background:url('img') no-repeat left top; } として、画面上に画像をひとつ表示させています。 そして、背景色を変えてみようと思いました。 画像に白い色を使ってあるところがあるのですが、 その白い色も、背景色に変えた方が見栄えが良さそうです。 そこで調べたら、 特定の色（白）を透過させるfilterというものがあると分かりました。 例では、<img src="img" style=filter: chroma(color=#ffffff);> となっています。 これを、スタイルシートで出来ないものでしょうか。 ためしに、 background-color: #****; background:url('img') no-repeat left top; filter: chroma(color=#ffffff); としてみましたが、変化ありませんでした。。 どこが違うのでしょうか。 透過処理してしまったほうが良いのでしょうか。 やり方が分からない＆ペイントしかないのでfilterでの方法をお聞きしました よろしくお願いします。
- ベストアンサー
- HTML
- テーブル背景のpng画像を透過したい
テーブルの背景に透過部分を含んだpng画像を設定して、その上に文字を載せたいと考えています。簡略化した現在のタグは以下です。 <table> <tr> <td background="（png画像URL）"> ここに文字 </td> </tr> </table> 通常だとこれで良いのですが、このpng画像は透過部分を含んでいます。（ちなみにpng-24です） WindowsのIE7.0だと正常に透過されるのですが、IE6.0や他のブラウザですと透過部分が青白く浮かび上がってしまいます。 私はIE6.0でも透過されるように表示させたいのです。 欲を言うと、MacのSafariでも透過させたいです。 一方、テーブルの背景に設定していない、普通の画像ですと<img src="">タグを使っているのでCSSを利用して、 ＜スタイルシート指定部分＞ .ail { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .ail img { visibility: expression("hidden"); } ＜／スタイルシート指定部分＞ ＜画像部分＞ <span class="ail"> <img src="（png画像URL）"> </span> ＜／画像部分＞ で透過しているのですが、テーブルの背景に指定した画像では、このタグは使えません。 他にも色々な方法を検索したのですが有効なものが見つからず、、、 そもそも、テーブルの背景に指定したpng画像は透過できないものなんでしょうか…？というところまで考えてしまいます。 もし方法があれば教えて欲しいですが、HTMLで実現不可能な範囲なのならばそれも指摘して欲しいです。 この部分だけクリアできれば、Webサイトも完成します。 切実に宜しくお願いします。
- 締切済み
- HTML
- 透過してしまうのですが・・・
現在タグでメニューバーをつくっているのですが、 背景が透過されるテーブルタグを利用したところあとから設置した画像までもが透過されてしまいました。その場合はどこのタグを直せばいいのでしょうか？ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>○○</title> <style type="text/css"> <!-- body { background-image: url(jfes_menupict.jpg); background-repeat: no-repeat; margin-left: 50px; margin-top: 20px; } --> </style></head> <body> <p> </p> <table style="filter:Alpha(opacity=50); background-color:#ffffff;"> <tr> <td width="281"><p align="center"> <img src="about.png" width="144" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="schedule.png" width="225" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="event.png" width="139" height="28" /></p> </td> </tr> <tr> <td><p align="center"><img src="blog.png" width="112" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="access.png" width="173" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="link.png" width="94" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="mail.png" width="96" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="toppage.png" width="200" height="27" /></p> </td> </tr> <tr> <td height="15"> </td> </tr> </table> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- GDを使って画像の背景を透過させたい
画像の背景を透過させたいと思い下記コードを実行してみたのですが、期待通りの状態になりませんでした。（体の周りに白が残ってしまう） $src = 'http://ec2.images-amazon.com/images/I/41VI47EYcaL.jpg'; $img = imagecreatefromjpeg($src); $color = imagecolorallocate($img, 255, 255, 255); imagecolortransparent($img, $color); imagepng($img); imagedestroy($img); そこで、255, 255, 255だけではなく250, 250, 250くらいも透過してみようと思い $color = imagecolorallocate($img, 255, 255, 255); imagecolortransparent($img, $color); $color = imagecolorallocate($img, 250, 250, 250); imagecolortransparent($img, $color); と、透過処理を二回続けてみました。すると、最初の状態よりも透過が上手く行われていない結果となってしまいました。 複数色を透過処理することはできないのでしょうか。 imagealphablending, imagesavealphaや、透過するごとに画像を保存して読み込んで…ということをしてみたのですがそれもやはり同じような結果でした。 255～250くらいまで、複数色を透過したとしても綺麗に背景だけ透過されるという結果は得られないかもしれませんが、もしよろしければ複数色の透過を行うコードを教えて頂ければ幸いです。 複数色を透過させる方法、もしくは他の方法でも良いので綺麗に背景だけ透過させる方法がありましたら教えて下さい。 宜しくお願い致します。
- ベストアンサー
- PHP
- iframeの透過
フレーム内の背景が透けて見えるようにpng画像を使用したのですがIEでは全く透過されません（firefoxではうまく透過されます） 出来ればIE6以上で透過できるようにしたいのですがどなたか分かる方みえないでしょうか？ <td height="308" colspan="8" background="背景画像.jpg"><iframe src="フレーム画像.png" width="530" height="268" scrolling="yes" frameborder="0" style=" background-color:allowTrdansparency="true"></iframe></td>
- 締切済み
- HTML
- 画像タグについて
画像タグについて テキストエディタにHTML（タグ）を入力してホームページの作成を目指して勉強しています。 ボタンの画像を横一列で4つ並べる場合のでタグの入力の仕方なんですが、 使用しているテキストでは改行せずに横に並べてタグを入力していきましょう。 となっています。 正解→<img src="A" ><img src="B" ><img src="C" ><img src="D" > 不正解↓ <img src="A" > <img src="B" > <img src="C" > <img src="D" > 理由としてはブラウザできれいに表示されるからだそうです。 実際にやってみると確かに不正解パターンより正解パターンの方がブラウザで隙間なくきれいに表示されています。 疑問なのですが、同じタグを縦で入力するか横に入力するかで なぜ、ブラウザの表示に違いで出るのでしょうか？ また、<img src="" >タグ以外でも,改行しないで横に入力するタグはあるのでしょうか？ それはどうやって見分けるのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- サイトを作っているのですが
サイトを２スタイルで作成中なのですが、画像が上手く表示してくれません。 タグは、 <img src="画像アドレス"> ですよね？ それで、「xxx」というフォルダにある「0126.png」を表示させたいので、 <img src="xxx/0126.png> だと思うのですが、×になって表示されません。 アドレスは間違っていません。 どうしたらいいのか、教えてください。
- ベストアンサー
- その他（インターネット・Webサービス）
- iflameのテーブルは透過し画像は透過しない方法
ホームページを作っています。 CSSを使用し、インラインフレームのページを作っております。 そこで困っているのがCSSの設定なのですが、 インラインフレーム部分とメニューコンテンツの部分の背景を 半透明に透過したい＆画像は全て透過したくないのです。 そこで、まずはメニューコンテンツ部分の背景を透過するため CSSの方を下記のように設定しました。 .sitetitle{ font-size: 20px; font-weight:bold; color:#666633; letter-spacing:4px; padding:0px 0px 5px; background: #fff; filter:alpha(opacity=50); opacity:0.9; } それから、このsitetitle内に載せる画像をHTMLで設定しました。 <div class="sitetitle"> <img src="index_files/03.jpg" width="210" height="170" ></div> ですが、 画像まで透過されてしまいます（キャプチャ画像のように） 画像は透過したくないのですが、どのように ｃｓｓの設定をし、HTMLタグを書けば良いのでしょうか？ ブラウザはFireFoxですが、グーグルクロムでも動作確認を行います。
- 締切済み
- CSS
