N_A_Oのプロフィール
- ベストアンサー数
- 37
- ベストアンサー率
- 66%
- お礼率
- 0%
- 登録日2004/08/23
- 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> 【CSS】 .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プロパティで不透明を100に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【CSS】 .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タグで囲って不透明100に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- testmaster_x
- CSS
- 回答数2
- FancyZoom (javascriptで画像拡大)のアイコン表示について
画像の拡大は出来ているのですが、FancyZoom付属の画像(closeboxなど)が表示されません。 表示させるページは、「report.html」です。 現在のディレクトリ構成は、下記のようになっています。 HPフォルダ-index.html | -report.html (http://www.○○○.com/report.html) | -images-global-zoom-closebox.png | -spacer.png | -js-global-FancyZoom.js | -FancyZoomHTML.js closeboxなどの画像(25個)は、全てアップロードしてあります。 また、「FancyZoom.js」内の44行目に記述されているパスは、以下のように絶対パスに書き換えてあります。 var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images ↓ var zoomImagesURI = 'http://www.○○○.com/images-global/zoom/'; // Location of the zoom and shadow images ※ブラウザ上で見た、表示されないclosebox.pngのパス: http://www.○○○.com/images-global/zoom/closebox.png ◆また、アイコンや枠(影)が表示されないことから、以下のようなCSSの効果が影響している可能性はありますか? .top_img_shadow { background-image: url(../images/top_shadow.jpg); background-repeat: repeat-x; background-position: 0px 0px; margin-bottom: 20px; } ■ FancyZoom http://www.cabel.name/2008/02/fancyzoom-10.html ■ 設置に関する参考サイト http://freesoft.tvbok.com/freesoft/web/fancyzoom_11.html 説明が分かりづらくてすみません。どうかよろしくお願いいたします。
- ベストアンサー
- noname#115684
- JavaScript
- 回答数3
- FancyZoom (javascriptで画像拡大)のアイコン表示について
画像の拡大は出来ているのですが、FancyZoom付属の画像(closeboxなど)が表示されません。 表示させるページは、「report.html」です。 現在のディレクトリ構成は、下記のようになっています。 HPフォルダ-index.html | -report.html (http://www.○○○.com/report.html) | -images-global-zoom-closebox.png | -spacer.png | -js-global-FancyZoom.js | -FancyZoomHTML.js closeboxなどの画像(25個)は、全てアップロードしてあります。 また、「FancyZoom.js」内の44行目に記述されているパスは、以下のように絶対パスに書き換えてあります。 var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images ↓ var zoomImagesURI = 'http://www.○○○.com/images-global/zoom/'; // Location of the zoom and shadow images ※ブラウザ上で見た、表示されないclosebox.pngのパス: http://www.○○○.com/images-global/zoom/closebox.png ◆また、アイコンや枠(影)が表示されないことから、以下のようなCSSの効果が影響している可能性はありますか? .top_img_shadow { background-image: url(../images/top_shadow.jpg); background-repeat: repeat-x; background-position: 0px 0px; margin-bottom: 20px; } ■ FancyZoom http://www.cabel.name/2008/02/fancyzoom-10.html ■ 設置に関する参考サイト http://freesoft.tvbok.com/freesoft/web/fancyzoom_11.html 説明が分かりづらくてすみません。どうかよろしくお願いいたします。
- ベストアンサー
- noname#115684
- JavaScript
- 回答数3
- マック メールの移動
マックからマックにメールの中身を全て移動したいのですが、上手くいきません。 なにか良い方法はありますでしょうか。 OSは両方10.4です。 至急の対応が必要です。宜しくお願いします!!
- 締切済み
- Jasmine730
- その他(OS)
- 回答数1
- マウスポインタをある形に変えたい
ちょっとかじっただけの初心者です。(技術者向けのカテゴリーですいません) スタイルシートでマウスポインタを 画面全体を横切る十字(つまり、クリックするところが縦線と横線のクロス点になっている、線は画面全体にわたっている) といった形にしたいのですが、どうすればよいでしょうか。 以前、どこかのHPで見たことがあるのですが、どこか忘れてしまったのでソースの確認もできず、検索してもマウスポインタを特定の画像にかえる方法しか見つけられず困っています。 それを応用できるだけの知識もないので、詳しい方、なにかご教授お願いします。