調べてもよく分からなかったので、お聞きしたいのですが、
背景色と背景画像を融合することは出来るのでしょうか?
要するに背景の画像を半透明にすることです。
HTMLでは出来ないのでしょうか?
もしそうであれば
出来る方法を知りたいのです。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

スタイルシートというのを使うとJPEGファイルでも半透明にすることができるようです。



下記URLは有名なHTMLサイト
 とほほのWWW入門 > とほほのスタイルシート入門
「フィルタサンプル」の「Alpha効果」についての記述です。

参考URL:http://tohoho.wakusei.ne.jp/wwwcss2.htm#Alpha
    • good
    • 0
この回答へのお礼

ありがとうございました。

あ、スタイルシートで半透明にすることができるんですね。
見に行ってみました。
というかとほほのWWW入門のサイトではよくお世話になっています。
全然気付きませんでした。
説明みたらなんだか使いにくいところもありそうですが。
でもさっそく試してみます。

お礼日時:2002/03/19 00:15

まず,その画像と同じ表示サイズで背景色で塗りつぶした画像を用意します。


画像をコピーして,背景色で塗りつぶした画像に貼り付けます。
そうしますと,新たにレイヤーが1枚加わります。
たぶん,右のほうに「レイヤー1」が増えているはずです。
で,そのすぐ上に,「不透明度」と書かれたところがあると思いますので,スライダーを動かして透明度を決定してください。
あとは「複製を保存」か,画像を結合してから「別名で保存」すると一応半透明になります。

一応,Photoshop LEで確認しています。
    • good
    • 0
この回答へのお礼

ありがとうございました&遅くなってすみませんでした。

体験版なので保存はできないのです。
でも確かにその方法だと
自分の好きなように絵全体の色を変えられますね。
分かりやすく教えてくださってありがとうございました。

お礼日時:2002/03/19 00:10

こんにちわ。

とまとです。

半透明にしたい、という事は解像度にそんなにこだわっていないのです
よね?
だとしたらjpgにこだわる理由は何でしょう(・_・?)

jpgからgifに書き換えて、1ピクセルずつとびとびにひとつの色を入れて
その色を最終的に透明にすると全体的に半透明っぽい画像になります。

もっと簡単な方法で言うと、ひとつのレイヤーを背景色に使う色で
塗りつぶして、その上に使いたいjpgを「半透明」(不透明度の%を下げる)
を置けば、擬似的にではありますが、半透明っぽく見えますよ。
機能限定版のPhotoShopでも、不透明度を下げる事くらいは出来ると想う
んですけど・・?(私のは正規版なのでよく分からないですが)
    • good
    • 0
この回答へのお礼

回答、ありがとうございました。
遅くなってすみませんでした。

実は私はjpgとgifの機能面での違いをよく知らないのです。
解像度が良いものにはjpgを使うのでしょうか?
あと、体験版のPhotoShopにはもちろん透明度を変える方法はありますが、
保存できないので仕方がないかと。
保存出来れば半透明にして使えるので聴く必要もないのです。
……不便ですね。

お礼日時:2002/03/19 00:06

画像ファイルの半透明…と言う事ですが、


ブラウザに依らず可能にするには、画像ファイルを加工する必要があります。

どういう加工かと言えば「透明色の適用」です。
これは、GIF形式とPNG形式で対応しています。JPEG方式やBMP方式では対応していませんのでご注意下さい。

実際に作業するにあたっては、画像編集ソフトが必須です。ソフトが用意できているのでしたら、

1.加工したいファイルを読み込む
2.透明にしたい部分(色を指定する)
3.「透明化を適用」して保存する

といった具合です。コマンド等は、ソフトウェアによって若干の違いはありますが、概ね上記の作業で補えるとおもいます。

お役に立てれば幸いです。

この回答への補足

ありがとうございます。
下でもいった通り、ファイルがJPEGなのです。
しかも透明化出来るソフトがないんです。
Photoshopは体験版を使っているので、
特殊効果ありのファイルは出来ないのです。
欲しくても高いものは買えないし、
フリーは見つからないし。macなんですよ。だから。
どうにかしてできませんかねぇ?

補足日時:2002/03/14 00:25
    • good
    • 0

GIFは半透明(透過)に対応していたと思いますが、


それはやってみましたか?

この回答への補足

ありがとうございます。
でも半透明にしたい画像がJPEGファイルなのです。
だから出来ればHTMLで出来ればと。
やっぱり出来ないのでしょうかね?

補足日時:2002/03/14 00:23
    • good
    • 0
    • good
    • 0
この回答へのお礼

ありがとうございました。
でも私が出来る方法ではないようです。
すみません。
javaとかも使えないし。

お礼日時:2002/03/14 00:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qfirefox:テーブルの背景色を半透明にすると文字も半透明になる

Web初心者です。
opacityを使用して、テープルの背景色を半透明にしようとしていますが、下記のコードでは文字も半透明になってしまいます。
<table border="0" cellspacing="1" cellpadding="3" style="-moz-opacity:0.2">
<tr bgcolor="#990000">
<td><font color="#FFFFFF">test</font></td>
</tr>
</table>
いろいろと調べましたが、IEでの解決方法は見つかるのですが、firefoxでやってみてもどれもうまくいきません。
市松模様の透過gif画像を作成する、という方法も知ってはいるのですが、色はユーザが指定できるようになっているので、全ての色の画像を用意するわけにも行かず、困っています。
firefoxでうまくやる方法はないでしょうか。

Aベストアンサー

1.半透明のPNG画像を用意する。
2.テーブルの背景に半透明のPNG画像と背景色を指定する。
3.2の背景色をユーザーが指定できる作りにする。

これで解決しないでしょうか?

<table style="background-image:url(hoge.png); background-color:#000;">
<tr>
<td style="color:#FFF;">test</td>
</tr>
</table>

Q半透明の画像をcssのbackground-imageで指定しても半透明のまま表示させたい

photoshopにて、単純に塗りつぶして不透明度を50%にしただけの画像をpng-24で保存しました。
これをhtmlのimgタグで表示させるとちゃんと半透明で表示されるのですが、cssのbackground-imageで指定すると半透明ではなくなってしまいます。
cssのbackground-imageでも半透明の状態で表示させる方法がありましたら教えてください。お願いします。

Aベストアンサー

背景に指定しても本来半透明で表示はされるはずです

ご覧になっているブラウザーはなんでしょうか?
IE6では半透明を再現できないのでおそらくハックを使っていらっしゃるかと思うのですが、
そのソースをご提示いただけると原因がわかるかとおもいます

携帯からなので言葉足らずの回答になって申し訳ございませんが、
よろしければ補足をいただければと思います

Q背景画像をCSSコードで半透明にしたいのですが・・

背景画像をCSSコードで半透明にしたいのですが・・
考えたコードはこのようです。
#sub{
background-image: url(背景画像);
background-repeat: no-repeat;
background-position: center center;
float:left;
filter:alpha(opacity=50)
opacity:0.5;
width:540px; /* D */
height:300px;
}

これだと背景を半透明にはできませんでした。
どのようにすればいいですか?

Aベストアンサー

#sub{
background-image: url(背景画像);
background-repeat: no-repeat;
background-position: center center;
float:left;
filter:alpha(opacity=50);
opacity:0.5; -moz-opacity:0.5;
width:540px; /* D */
height:300px;
}

QPNG画像の背景色をIEでも透明に表示するには?背景画像でリピートして使いたいです。

背景色チャンクをコントロールする方法。
http://www.minc.ne.jp/~konda/new/png/way01.html
これだと、背景色を透明に設定する方法が判りませんでした。RGB値で透明が設定できればいいような気もしたのですが、無理なような気もしました。


AlphaImageLoaderで背景色を透明にする方法は背景リピートでは使えませんでした。

これを改善した方法か、これ以外の方法がありましたら、ご教授下さい。
宜しくお願いします。

Aベストアンサー

IE6までは透過PNGは対応してないってのが仕様なんだから諦めようよ。
透過GIFで。

私は諦めたよ。気持ちは分るけど。まさにしようがない。

QIE6での背景の半透明化について

こんにちは、独学でホームページを作っている者です。
家のPC環境のIE7でサイトを作っていて、24bitのPNGで無地の白の半透明の画像をつくり、それを#kakoiというBOX(width:600px;height:570px)を作り、background-imageで配置しました。IE7なので確認すると半透明化されていました。ちなみにbodyのbackground-imageは緑から白のグラデーションです。

しかし、別のPC(IE6)で作業をしていると半透明化されてないことに気づき、色々調べるとIE7から対応との事。
調べると半透明にできる方法が掲載されており、その通りにやると背景は半透明化されたのですが、その上に配置してある画像なども透明化してしまいました…。そのほかにもbodyのbackground-imageの色より少し濃い色を配置するなど色んな方法もあったのですが、私の場合グラデーションなのでうまくいきませんでした。

どなたかIE6やFire foxなどに対応できるうっすらグラデーションが見えるように半透明化ができる方法をご存知の方、教えてください。

こんにちは、独学でホームページを作っている者です。
家のPC環境のIE7でサイトを作っていて、24bitのPNGで無地の白の半透明の画像をつくり、それを#kakoiというBOX(width:600px;height:570px)を作り、background-imageで配置しました。IE7なので確認すると半透明化されていました。ちなみにbodyのbackground-imageは緑から白のグラデーションです。

しかし、別のPC(IE6)で作業をしていると半透明化されてないことに気づき、色々調べるとIE7から対応との事。
調べると半透明にできる方法が掲載されており、そ...続きを読む

Aベストアンサー

必要なのは、「iepngfix.htc」というファイルだけです。
それを任意の場所に置いて、あとは
●cssファイル
#kakoi{
width:600px;
height:570px;
background:url(../img/bg.png);
behavior:url(iepngfix.htc);/*「iepngfix.htc」のパスに注意*/
}

●htmlファイル

<div id="kakoi">内容</div>

と記述するだけです。「iepngfix.htc」のパスに注意してください。
imgはCSSファイルからの参照ですが、「iepngfix.htc」はCSSを適用させるhtmlファイルからのパスです。
blank.gifは、透過画像の上に何ものせない場合、空間を確保するため、またはalt属性をつけるために配置しておく画像だと思われます(<div id="kakoi"><img src="img/blank.gif" alt="" width="600" height="570"></div>というかんじで…)。気にしなくても大丈夫ですよ。

必要なのは、「iepngfix.htc」というファイルだけです。
それを任意の場所に置いて、あとは
●cssファイル
#kakoi{
width:600px;
height:570px;
background:url(../img/bg.png);
behavior:url(iepngfix.htc);/*「iepngfix.htc」のパスに注意*/
}

●htmlファイル

<div id="kakoi">内容</div>

と記述するだけです。「iepngfix.htc」のパスに注意してください。
imgはCSSファイルからの参照ですが、「iepngfix.htc」はCSSを適用させるhtmlファイルからのパスです。
blank.gifは、透過画像の上に何も...続きを読む


人気Q&Aランキング

おすすめ情報