Ads By Google
記事とプラグインを透過で指定したい。
プラグインや記事の背景に指定されている色を等価にすることは出来ますか?現在は
#banner,#subbanner{background:url(http://image.blog.livedoor.jp/~~/imgs/~/~/~~~.gif) no-repeat scroll 50% 0%;
height:410px;
と指定しているのですが、これでは記事とプラグインの部分がトップのバナーの下にずれてしまうんです。
記事やプラグイン部分を透過にすることで、#banner,#subbannerで指定しているトップバナーの画像を、記事やプラグイン部分にも背景として一部採用したいんです。
イメージとしては
のような感じです。
先日も
で、質問させていただき、おかげさまでプラグインの位置をずらすことには成功しました。
しかし今度はトップバナーの画像をずらしたプラグインの部分にまで伸ばすことが出来ません。
妙案はありますか?
2006-09-16 02:32の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
回答(1)
1.
2006-09-16 03:22:27

直接的な解決につながるとは言い難いですが、背景半透過を設定するという点において、参考資料として以下の方法を記してみます。
ただし、制限事項があるので必ず最後まで目を通してください。一例を示します。
●本文側全体の背景を半透過
#content{
width:70%;
float:right;
background:#ffdd43;
●プラグイン側全体の背景を半透過
#links{
float:left;
width:27%;
padding:10px 10 50px 10px;
text-align:center;
background:#88a500;
それぞれ上記囲まれた部分を書き加えます。
透過度は85と0.85の2ヵ所で設定します。
数字が小さい程、透明になります。
■#container の部分に設定すると、サイドバーと本文全体、
「続きを読む」の先のページの3ヵ所全てが一括で透過する事が出来ます。
■#content の部分に設定すると、本文全体を透過する事が出来ます。
■#links の部分に設定すると、サイドバーを透過する事が出来ます。
(3カラムにした場合は、#links1 #links2 のそれぞれに設定します)
※#container に設定した場合は、コメントの書き込みが重くなってしまいますので避けた方がよいかと思われます。
【注意】
上記の説明で -moz-opacity:0.85; を書き加えておりますが、問題が起きる場合があるので、もし追加して何らかの不都合がある場合は -moz-opacity:0.85; は削除して設定して下さい。
なお、削除した場合(filter:alpha(opacity=85); だけで設定する場合)、IE6ではちゃんと透過した状態で表示されますが、それ以外では非透過になるブラウザがあることをお知らせしておきます。
ただし、制限事項があるので必ず最後まで目を通してください。一例を示します。
●本文側全体の背景を半透過
#content{
width:70%;
float:right;
background:#ffdd43;
filter:alpha(opacity=85); -moz-opacity:0.85;}
●プラグイン側全体の背景を半透過
#links{
float:left;
width:27%;
padding:10px 10 50px 10px;
text-align:center;
background:#88a500;
filter:alpha(opacity=85); -moz-opacity:0.85;}
それぞれ上記囲まれた部分を書き加えます。
透過度は85と0.85の2ヵ所で設定します。
数字が小さい程、透明になります。
■#container の部分に設定すると、サイドバーと本文全体、
「続きを読む」の先のページの3ヵ所全てが一括で透過する事が出来ます。
■#content の部分に設定すると、本文全体を透過する事が出来ます。
■#links の部分に設定すると、サイドバーを透過する事が出来ます。
(3カラムにした場合は、#links1 #links2 のそれぞれに設定します)
※#container に設定した場合は、コメントの書き込みが重くなってしまいますので避けた方がよいかと思われます。
【注意】
上記の説明で -moz-opacity:0.85; を書き加えておりますが、問題が起きる場合があるので、もし追加して何らかの不都合がある場合は -moz-opacity:0.85; は削除して設定して下さい。
なお、削除した場合(filter:alpha(opacity=85); だけで設定する場合)、IE6ではちゃんと透過した状態で表示されますが、それ以外では非透過になるブラウザがあることをお知らせしておきます。
回答レベル : アドバイス
なんとかイメージに近いものになりそうです。
ブラウザによって細かく指定したほうがいいようですので、追記の部分は削除せずそのまま使わせていただきました。
特に問題はないようです。
ありがとうございます。
Ads By Google
コメント
まだコメントがありません




