• ベストアンサー

CSSのみでPNG画像を透過グラデーションさせたい

画像編集ツールを用いて作ったアルファチャンネルPNGと同様な「透過具合のグラデーション」を、PNGなど写真の画像ファイル全般に対して、CSSのみで再現することは可能でしょうか？ CSS自体で作った背景を透過グラデーションさせる方法は見つけられましたが、画像ファイルに同様の効果を付与する方法を見つけられないでいます。 ご助言を頂けると幸いです。

  • CSS
  • 回答数1
  • ありがとう数14

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

  • ベストアンサー
回答No.1

もしかして、RGBのソースに別のAのみを合成して ブラウザ内で、RGBAのソースを作り出す？ことは可能か？ という意味でしょうか？ 知っている限りCSSのみでは難しいと思います。 HTML5では、可能でしたが。 CANVASを使ったつくり方では、可能なので、 一度チャレンジしてもいいかもしれませんが。 一応質問がCSSのみで出来るか？ なので、現状、出来ないと思います。 で、とめておきます。

LunaHawke
質問者

お礼

なるほど、やはりCSSでは不可能なのですね。 ヒントを頂きましたのでそちらで調べてみたいと思います。 お答えありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 透過ＰＮＧ画像がおかしい

    透過ＰＮＧ画像なのに、編集ソフトでは、背景が真っ黒になっていたり 使えません。 なんとかうまく透過になるようにしたいです。 ソフトが、PNG画像に対応していないためだと思われるのですが、 どうしたらいいですか？

  • CS6でのPNG形式の透過画像の作成編集について

    CS6のフォトショップとイラストレーターを使用してPNG形式の透過画像を作りたいのですが、スムーズに作成、編集する方法を教えてもらえると嬉しいです。 フォトショップ上で加工、編集している場合は背景がチェッカーフラッグのようなブロック状になっていて、透過としてPNGで保存でき、そのファイルは透過PNGとして使えます。 しかし、同じファイルをイラストレーターで開いて、編集、保存すると背景が真っ黒になってしまいます。保存時には「透明部分」にチェックを入れて保存しているのですが、うまく行きません。 合成のときに使いたいフリー素材がAI形式なので一旦イラストレーターを使う必要があります。 気になったのは、はじめからイラストレーターで作ったファイルは透過保存できる点です。 編集時の背景も異なっていて、イラストレーターで作っているファイルは背景は白、保存時は背景がブロックパターンになっています。フォトショップで作った透過PNGを開くと編集時から背景が真っ黒で、保存時も同じく黒です。 色の形式、CMYK、RGB、インデックスカラーなどの違いが影響しているのでしょうか？ （それぞれの使い分けはよくわかりませんが、合成するときに合成不可だった場合、モードを変えると合成できたりするので、その際に触るくらいです） イラストレーターで絵を描くのは苦手なので、フォトショップのドット絵的な感じで絵を描いて、AI形式のフリー素材を合成して、透過PNGとして仕上げたいのですが、どのようにしたら上手く行きますでしょうか？ よろしくお願いします。

  • テーブル背景の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サイトも完成します。 切実に宜しくお願いします。

  • 透過pngを表示するスクリプトとロールオーバー

    トップページのタイトル画像を透過させてロールオーバーさせたいです。 --- 透過pngを使いたかったのですが、使用しているブラウザに対応していなかったので、どうにか表示させる方法を探していました。 そしてたどり着いたのは（http://www.designwalker.com/2006/12/transparent-png.html）のサイトのスクリプトなのですが、画像をロールオーバーさせるJavaScriptには対応していないのでしょうか。 <A href="t_off.png"><img src="t_off.png" onMouseOver="this .src='t_on.png'"onMouseOut="this .src='t_off.png'"></A> ↑これです/ロールオーバーに使用しているタグ CSSでのロールオーバーも考えた（挑戦した）のですが、タイトル画像で大きさを掴みにくく、中々上手く指定が出来ません。 CSSではリンクに触れた際に背景の画像をずらすことになると思うのですが、同じサイトの透過pngを背景画像で使うスクリプトでは、大きさを指定しなくてはならず、上手に出来ませんでした。 （そのスクリプトなしでは成功しました） --- 一つのサイトのプログラムのことなので、ここで質問すべきではないのかも知れませんが、あちらでは場違いになりそうなので、ここに書かせて頂きました。 カテゴリもまたがっているので、もしも問題がありましたら、ごめんなさい。 よろしければ、ご回答お願いします。 --- 使用ブラウザ:Sleipnir 1.66 画像編集ソフト:Adobe Photoshop Elements 5.0

  • CSS ロールオーバーでpng画像が透過しない

    下のCSSでオンマウス時（hover)のpng画像（下記の6b.png）が透過せず、jpgの様に白い背景になってしまいます。 どなたか分かる方よろしくお願いします。 #menu ul#gNavi li#gn06 a:link, #menu ul#gNavi li#gn06 a:visited{ background-image: url(../img/6.png); background-repeat: no-repeat; } #menu ul#gNavi li#gn06 a:hover, #menu ul#gNavi li#gn06 a:active{ background-image: url(../img/6b.png); background-repeat: no-repeat;

  • Access2003でpng画像の透過部分が透明にならない

    Access2003(WinXP SP2)です。 外部向けに作成したレポートに社印をあらかじめ印刷しようと、透過部分を含むpng画像を作りました。 (古いですがAdobe Photoshop Elements 2.0にて) エクセルやワードでは透過部分が透明になるのですが、Accessで試したところ、透過処理されませんでした。 プロパティの中では"背景色"の欄を透明にしても、画像の周りだけが透明になり、画像内の透過部分には適用されませんでした。 お分かりになる方がいらっしゃいましたら、レポート内にpng透過画像を思い通り表示する為の方法を教えて頂ければと思います。

  • CSSで背景にグラデーション

    お世話になります。 CSSを用いて背景にグラデーションをかけようと苦心しています。 filter:alpha(opacity=100, finishopacity=0, style=1); で、グラデーションはかかるのですが、 そのタグ内の文字までグラデーションがかかってしまいます。 また、この方法ですと、Firefoxでは、グラデーションがかかりません。 Yahooのページ http://www.yahoo.co.jp/ では、背景画像を使わないでグラデーションをかけていると思うのですが、どのようにすればこのようなことができるのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 透過PNG画像の縮小について

    私は、友人の自作ゲームのヒロインの立ち絵を描くことになりました。 背景は透明で、縁は綺麗に（ガタガタじゃないもの）、立ち絵だけの 画像が作りたいのですが、2424pxと非常に大きいサイズで作ってしまい 300pxに縮小しました。 すると、背景は真っ黒に塗りつぶされてしまい、後から加工しようにも 黒い背景だとなかなか難しく、白い背景で縮小しても 後から白い背景を取り除くと縁がガタガタになってしまいます。 綺麗に、そのまま透過PNGを縮小する方法ってないんでしょうか？

  • CSSで透過ありの画像を設定することができません

    最近、HP作成にチャレンジしていていて CSSを使ってチェックボックス内に画像を表示することができるようになりました。 しかし、画像の背景が透過になりません。 チェックボックスには色をつけているので 画像の背景も透過にしたいのですがどうしたらいいでしょうか？ J-trimやgimp2で透過を設定して保存したのですが反映されません。。 詳しい方よろしくお願いいたします。

  • 画像透過について

    透過した写真の画像をpngファイルで保存したのですが、ウェブにアップするとグレーっぽい色の背景がついてしまいます。gifファイルで保存する以外はウェブでは背景がついてしまうのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する