• 締切済み

h2 背景色 透明化

お世話になります。 h2の件でもう一つ h2背景色を透明化(薄くする) 方法を教えてください。 同様にボックス内、背景色の透明化についても 教えてください。 CSS および htmlお願いでき無いでしょうか。 style="filter:alpha(opacity=70) 色々試しているのですが どの場所に入れたらいいですか? ちなみに下記の通りです。 <style type="text/css"> <!-- .style1 {   font-size: 14px; border: thin solid #00CC66; color: #FFFFFF;       background-color: #99FF99; } --> </style> 外部に書く場合もお願いできますでしょうか。 お手数かけますが宜しくお願い致します。

みんなの回答

  • 345itati
  • ベストアンサー率48% (795/1639)
回答No.1

いきなり質問の腰を折って申し訳無いですが、filter:という要素がIEの独自拡張で、Firefox等ではエラー扱いで適用されず、表示が意図しないものになっても大丈夫ですか? 又、回答者に対して作業を丸投げするのはマナー違反だと思いますが、念の為・・・。

yoksspp
質問者

お礼

ご覧頂きありがとうございました。 345itati様 ご指摘すみません 謙虚に受け止めます。 丸投げになるのですね すみませんでした。 以後気をつけます。 解らないとつい出すぎてしまいます。 申し訳ないです。 でも心からご質問とご理解ください。

関連する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
  • cssで文字背景を透明化できますか?

    cssで文字背景を透明化できますか? 文字の背景にbackground-colorで色をつけ、その色を透けて見せたいのですが、 わかりません・・。 「-moz-opacity:50;」とか「filter:alpha(opacity=50);」などで色の透明効果を 出せるとありましたが、ソースをどう記述すればいいのかわかりません。 よろしくお願いしますm(_ _)m

  • テーブルの背景を透過する方法

    テーブルの背景だけを透過したいんですけど、どうすればいいですか? 自分で調べてみて、テーブルタグの中に<style="background-color:#FFFFFF;filter:Alpha(opacity=75);">を入れてみたんですけど、テーブル全体を透過してしまって文字まで薄くなってしまったんです。 だから、背景を透過した画像を並べてみたんですけど、なんか不自然で、私がイメージしていたのとは違うんです。私は最初にやったように、元の背景の色自体が薄くなるよいうにしたいんです。 でも、それって不可能なことなんですか?

    • ベストアンサー
    • HTML
  • レイヤーを背景だけ透過させたい

    お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。 たとえば <div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);"> フィルター適応</div> のようにすると、レイヤー全体が透過されます。 しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。 1つ考えた方法として、 <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);"> </div> <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;"> フィルター適応 </div> のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。 ご存知の方がいらっしゃいましたら、ご教授お願いいたします。

    • ベストアンサー
    • HTML
  • styleタグとbodyタグの関係について分かりません・・・

    スタイルシートの中にbodyを入れた場合、</html>の前に</body>は必要でしょうか?それとも不要でしょうか? 下記のタグはマウスオーバーで画像の濃さを変えるようにしたかったため、サイトより転用しました。 スタイルの中にbodyタグを入れる意味はどういった利便性がありますか? <style type="text/css"> <!-- body { margin-left: 2em; margin-right: 2em; style: overflow-x:hidden; color: black; background: #FFFFFF; } a:link { color: blue; } a:visited { color: purple; } h1 { font: bold 1.5em Verdana; } a img { filter: Alpha(Opacity=100); -moz-opacity: 1.5; border-style: none; } a:hover img { filter: Alpha(Opacity=50); -moz-opacity: 0.5; } --> </style> ご存知の方教えてください!

    • ベストアンサー
    • HTML
  • セレクトメニューボタンの枠の色の変更の仕方を教えて下さい。

    セレクトメニューボタンの枠の色の変更の仕方を教えて下さい。 <HEAD>と</HEAD>の間に <style type=text/css> <!-- input,select,textarea { filter:Alpha(opacity=数字,enabled=数字); font-size:文字サイズpt; color:#文字の色; font-family:'文字の種類'; background-color:#背景色; border-top:1px solid #fe97b3; border-bottom:1px solid #fe97b3; border-left:1px solid #fe97b3; border-right:1px solid #fe97b3; } --></STYLE> と入れてます。 <input>の枠の色は変わりますが、<select>のみが変わりません。 どこが悪いのでしょうか

  • Alphaフィルタについて

     こんにちは。質問させてください。 現在、alphaフィルタを使って、画像の背景を半透明にしたいと思っているのですが、どうしてもできません。 (確認はie6.0でも5.5でも行っています) ソースはタグ辞典を見ながら、下のようなものを組みました。 どこか間違っているでしょうか? お教え頂ければうれしいです。 よろしくお願い致します! <html> <head> <meta http-equiv="Content-STYLE-Type" content="text/css; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .alpha1{ filter:progid:DXImageTransform.Microsoft.alpha(style=2,opacity=100, finishopacity=40); } .alpha2{ filter:progid:DXImageTranceform.Microsoft.alpha(style=2,opacity=100, finishopacity=0); } --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <img src="/jsg41044.jpg" width="700" height="466" class="alpha2"> </body> </html>

    • ベストアンサー
    • CSS
  • 透過背景を解除するにはどうすればいいのでしょうか?

    透過背景を解除するにはどうすればいいのでしょうか? filterとopacityを使って背景色を透過したdivがあります このdivの一部で透過を解除したいのですがどうすればいいのでしょうか? コードは以下のようなイメージです ---------- ■ HTML <div class="sample1"> ・・・←ここは透過 <div class="sample2"> ・・・←ここは透過にしたくない </div> ・・・ </div> ■ CSS .sample1 { ・・・ opacity: 0.6; ←火狐他用 filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=60); ←IE用 } .sample2 { ここに記述する内容が知りたい } ---------- やってみてダメだった方法 ・opacity: 1 ・filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=100); ・filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=0,Style=0,Opacity=60); ・sample2に新しい背景色を指定する ・sample2に新しい背景画像を指定する ご存知の方いましたら、よろしくお願いします!

    • ベストアンサー
    • HTML
  • CSSを消して表に色を付けたい!!!

    参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「CSSが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> 1.CSSを全て解除しなければいけないのですか? 2.メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか?

  • CSSの背景を半透明

    http://www.tacky.cc/program/htm_tips/html/style01a.htmのサイトからサンプル抽出して、色々手を加えていますが、 よく分からなくなってしまいました。そこで質問ですが、下記のプログラムでわからない事があります イメージとしては、アップルの場所は忘れましたが、透明の画像が、3.4重に重なっている感じにしたいと思っています。 <HTML><HEAD> <STYLE TYPE="text/css"> <!-- DIV.sample01 { background-color:#000000; position:relative; top:-70px; right:-00px; height:20px; width:1100px; filter:Alpha(opacity=50); z-index:0; color:#000000; font-size:x-small; padding:3px;} } DIV.sample02 { background-color:#ffffff; position:relative; top:-1100px; right:-100px; height:-100px; width:250px; filter:Alpha(opacity=60); z-index:2; color:#ffffff; font-size:x-small; padding:3px;} } <!--ここから黒の色--> DIV.sample03 { background-color:#2E2921; position:relative; top:-500px; right:-100px; height:300px; width:500px; filter:Alpha(opacity=60); z-index:3; color:#ffffff; font-size:x-small; padding:3px;} } <!--ここまで黒の色--> DIV.sample04 { background-color:#F7CE71; position:relative; top:3000px; right:-10px; height:180px; width:200px; filter:Alpha(opacity=40); z-index:1; color:#000000; font-size:x-small; padding:3px;} } --> --> </STYLE></HEAD> <BODY> <BASEFONT SIZE="2"> <table><tr><td> <DIV CLASS="sample01"> <DIV CLASS="sample02"> <DIV CLASS="sample03"> <DIV CLASS="sample04"> </table></td></tr> </BODY></HTML> このようなプログラムにしましたが、何も表示されなくなってしまいました。 原因はpositionの指定が悪いと思います(pxを変更後おかしくなりました)で、「top:*px;」「right:*px;」 「height:*px;」「width:*px;」の意味がわかりません。高さや長さというのはわかりますが、 それから、「DIV.sample*」の中に「background-color:#F7CE71;」があるのに、さらに「color:#000000;」の二つある 意味がわかりません。サンプルをコピーして、手を加えたので、理解していない部分があるので、参考になる アドバイスお願いします。

    • ベストアンサー
    • HTML