- ベストアンサー
cssで文字背景を透明化できますか？
cssで文字背景を透明化できますか？ 文字の背景にbackground-colorで色をつけ、その色を透けて見せたいのですが、 わかりません・・。 「-moz-opacity:50；」とか「filter:alpha(opacity=50)；」などで色の透明効果を 出せるとありましたが、ソースをどう記述すればいいのかわかりません。 よろしくお願いしますm(_ _)m
- mck37
- お礼率97% (469/482)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
注意点は二つ。 1)半透明にした背景の範囲内はテキストも半透明になってしまう。 2)IE,Firefoxは対応するけど、ブラウザ依存であることには違いない。 一例 <html> <head> <style> .box{ width:350px; height:50px; background:#3399ff; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3; font-size:50px; color:#000000; } </style> <body background="a.jpg"> <span class="box"> ＡＢＣＤＥＦＧ </span> </body> </html>
関連するQ&A
- css box 背景画像透過表示させる
cssboxで枠を作っています。メインボックスにbodyで指定した背景を透過して入れたいと思っています。こんなcssを使ってみましたが背景どころか全て薄くなってしまいました。 filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;
- ベストアンサー
- CSS
- 背景画像を反転させる方法
背景画像を反転させる方法 いつもお世話になっています。 今、趣味のサイトの再構築に伴い、ネットや本を見ながらHTMLとCSSについて勉強中です。 そこでcssの記述について教えて頂きたいのです。 背景の画像を右下に固定する場合、cssの記述は、 body{ background-image:url("×××.gif"); background-repeat:no-repeat; background-attachment:fixed; background-position:right bottom; } としますよね？ 後、cssで画像を左右反転させる場合は、classでfilter: fliph()を使えばいいとわかりました。 ではこの反転させた画像を背景に使いたい場合、どうすればいいのでしょう？ そもそもそのようなことが可能なのでしょうか？ もし可能でしたら具体的にどのような記述をすればいいのか教えて頂きたいのです。 それとfilterはIE独特の要素と聞いていますが、filter: fliphもそうなのでしょうか？ しかしながらfilter: alphaに関しては filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; と記述すればFirefoxなどでも透明効果が出るようです。 filter: fliphもIE独特の要素ならばfilter: alphaのように他のブラウザでも対応させる方法があるのでしょうか？ 長々と書いてしまいましたが、知りたいことを要約すると １．cssで画像を反転させ、それを背景画像に使うことは可能か否か 可能ならばどう記述すればよいのか ２．filter: fliphで画像を反転させた場合、IE以外でのブラウザで反映されるか否か また反映されないのなら、対応させる方法はあるのかどうか と言うことです。 １と２、分かる方だけでも結構ですのでよろしくお願いします。
- ベストアンサー
- HTML
- 背景画像を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; } これだと背景を半透明にはできませんでした。 どのようにすればいいですか？
- ベストアンサー
- HTML
- マウスオーバー時に、半透明のフィルターをかけたい
タイトルにフィルターという言葉を使っていますが、 filterを使う技ではないかもしれません。 背景に画像を設定しており、テキストにはfilter:dropshadowで 影を付けています。 また、<A HREF="">…</A>のリンクも付いています。 この状態で、テキストにマウスを乗せた時、 半透明のフィルムをかけたような感じにしたいのです。 onmouseover="this.style.backgroundColor='色'; this.style.filter='alpha(style=0,opacity=30)'; とやってみたのですが、背景色が半透明にならならず、 文字に付けた影も消えてしまいます。 また、CSSでもやってみたのですが A:hover { background-color : 色 ; filter : alpha(opacity=30); -moz-opacity : 0.30 ; opacity : 0.30 ;} やはり、半透明にはなってくれませんでした。 透明度はまったく無い、元の色のままです。 偶然にも半透明の背景になった時はあったのですが （タグは忘れました） 文字まで半透明になってしまいました。 しばらく色々試していたのですが、もし半透明になったとしても 変えたいのは背景色ではないという事に気づき、 また最初から考え直しでかなり参っています。 （自分が悪いんですが・・・） ●半透明の色フィルムを重ねたような感じにしたいです。 当然、文字も文字の影も背景も、透けて見える状態。 ●文字の長さはそれぞれ異なります。 ●あくまでもマウスオーバー時にそのようになり、 乗せる前、離した後は元通り、何も無い状態にしたいです。 CSSを使うのかJAVAを使わないとダメなのかもよく分からず、 説明も上手くできなくて申し訳ありません。 どうぞ宜しくお願いします。
- 締切済み
- その他（プログラミング・開発）
- ＨＴＭＬ・ＣＳＳ・背景画像半透明化
body背景画像を活かしつつ、もう一枚の画像を前に持ってきて、透けさる 方法 皆様お忙しい中、申し訳ございません。 今、ホームページを作成中でして、body背景に画像を持ってきて、その上に 文章を持ってきたら文章がはっきりしないので、背景画像を活かしつつ文章の前に半透明化の＃000000を７０％位の濃さで残し、これはたぶんＦＬＡＳＨだと思いますが、この様な感じで、（黒い透けた真ん中画像） http://store.honeyee.com/製作したいと思っております。 （ＨＴＭＬ、ＣＳＳで） ＣＳＳではこの様な形でやってみたんですが、bodyより上の画像がすべてすけてしまいレイアウトできませんでした。 filter:alpha(opacity=43); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ＧＩＦ、ＰＮＧの文字周りの透過ではなく一枚のイメージの透過を教えて 下さい。 宜しくお願い致します。
- 締切済み
- HTML
- javascriptでCSSを書き換える際の記述
javascriptのイベントで背景を透明化するため .css("opacity","0") としていたのですが、ＩＥだけうまく透過しませんでした そこでＩＥ用に filter: alpha( opacity=0) を適用するように書き足したいのですが どうもうまくいきません どのように記述すればよいでしょうか？
- 締切済み
- JavaScript
- CSSで背景にグラデーション
お世話になります。 CSSを用いて背景にグラデーションをかけようと苦心しています。 filter:alpha(opacity=100, finishopacity=0, style=1); で、グラデーションはかかるのですが、 そのタグ内の文字までグラデーションがかかってしまいます。 また、この方法ですと、Firefoxでは、グラデーションがかかりません。 Yahooのページ http://www.yahoo.co.jp/ では、背景画像を使わないでグラデーションをかけていると思うのですが、どのようにすればこのようなことができるのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルの背景を透過する方法
テーブルの背景だけを透過したいんですけど、どうすればいいですか？ 自分で調べてみて、テーブルタグの中に＜style="background-color:#FFFFFF;filter:Alpha(opacity=75);"＞を入れてみたんですけど、テーブル全体を透過してしまって文字まで薄くなってしまったんです。 だから、背景を透過した画像を並べてみたんですけど、なんか不自然で、私がイメージしていたのとは違うんです。私は最初にやったように、元の背景の色自体が薄くなるよいうにしたいんです。 でも、それって不可能なことなんですか？
- ベストアンサー
- HTML
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS
- 背景が透けると文字も透ける
初心者ですが、本やネットをみながらHPを作成しています。 そこで、背景画像の上に文字を入れると読みにくいので 画像を透けさせようとテーブルを作成したのですが 同時に文字も透けてしまい、読みにくさは変わりません。 どうすれば良いでしょうか？ タグは以下の通りです。 <table align="center" style="background-color:#c0c0c0; filter:Alpha(opacity=50);" height="600" width="400"> <tr><td> <font size="-1" color="#000000">文字文字文字 </font> </td></tr> </table>
- ベストアンサー
- HTML
お礼
ありがとうございました。いくつか試しても元々知識がないので・・・ もしかしたらまだ他に方法があるのでは？と納得できないでいました。 そうですか・・文字も透明化されてしまうのですか・・残念です。 ソースまで書いて頂きhtml・css初心者の自分にはとても有難いでした。＾＾