サイトの制作をしております。

CSSに下記を指定し、背景を半透明にしているのですが、
文字や画像まで半透明になってしまいます。
背景だけ半透明にするにはどうすればよいでしょうか?

filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/07/10 19:23:58
  • 終了:2011/07/17 19:25:04

回答(3件)

id:yotaca No.1

よたか回答回数426ベストアンサー獲得回数462011/07/10 22:56:22

ポイント34pt

わたしは、背景画像に透過pngを使ってます。

 

こちらのサイトで使っている個所を例としてあげます。

(はなまるトーナメント)

http://hanamachi.com/tnmt/

 

このサイトの中央のイメージの下の部分のメニューについて、下記の通り指定しております。

イメージ画像:topImage01.png

白い半調の透過png:hrefSiro05.png

黒い半調の透過png:hrefBk07.png

 

#topimage{

 width:100%;

 height:20px;

 padding-top:160px;

 background:url('img/topImage01.png');

 margin-bottom:10px;}

#topimage ul{margin:0 0 0 -10px;}

#topimage ul li{float:left;}

#topimage ul li a{

 display:block;

 width:78px;

 height:18px;

 color:#033;

 text-align:center;

 background:url('../img/hrefSiro05.png');

 border: 1px solid #868686;

 border-color:#D4D2CF #868686 #868686 #D4D2CF;}

#topimage ul li a:hover{

 color:#fff;

 background:url('../img/hrefBk07.png');

 border-color:#868686 #D4D2CF #D4D2CF #868686;}

 

透過pngの作り方がわからなければ持っていってもらっても構いません。

参考になれば幸いです。

 

追伸:ソースに全角スペースが入ってますので使う時は全角スペースを削除してお使いください。

id:km1981 No.2

km1981回答回数429ベストアンサー獲得回数492011/07/11 10:14:27

ポイント33pt

filterは一般的ではありませんが、IEの話ですか?


普通はCSSではなくて、背景画像に半透明PNGを使います

これならIE以外のブラウザでもOKです

http://blog.livedoor.jp/loopus/archives/50252947.html

id:yasu_sinjuku No.3

やす@新宿回答回数71ベストアンサー獲得回数102011/07/11 23:04:42

ポイント33pt

通常は、filterは使わずに透過pngを使います。

ただし、透過pngの使い方は、以下のURLを参考にすると良いです。

IE6対応しなければ、普通に使えますが、まだ、若干の間は、IE6対応が必要かもしれません。

http://www.tomokos.net/index.php?e=103

  • id:godabin
    opacityプロパティ使うなら前景も影響うけるのでは
    http://www.marguerite.jp/Nihongo/WWW/RefCSS/opacity.html
    http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20367886/
  • id:makocan
    >godabinさん
    特にこのプロパティには拘りは無いため
    別の方法で半透明が出来るなら、お教え頂けますでしょうか?
  • id:SHARUL
    比較的新しいブラウザのみをターゲットとしてよければ、透過pngを使う以外に下記の色記述を使う方法もあります。

    /*赤で不透明度が60%*/
    background-color:rgba(255,0,0,0.6);
    /*赤で不透明度が60%、順に色相(0~359)、彩度(パーセント)、明度(パーセント)*/
    background-color:hsla(0,100%,100%,0.6);

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません