人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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


●質問者: makocan
●カテゴリ:インターネット ウェブ制作
✍キーワード:Alpha CSS MOZ サイト 制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● よたか
●34ポイント

わたしは、背景画像に透過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の作り方がわからなければ持っていってもらっても構いません。

参考になれば幸いです。

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


2 ● km1981
●33ポイント

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


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

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

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


3 ● やす@新宿
●33ポイント

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ