• 締切済み

オーバーレイについての質問です。

オーバーレイについての質問です。 #overlay { position: absolute; top: 0; left: 0; width:100%; height: 100%; min-height: 100px; background: #000; z-index: 500; filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; } 上のようなスタイルでオーバーレイを使用しているのですが、 スクロールでするとどうしても下が切れてしまいます。 解決策を教えて下さい。よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数0
回答 全件
スクロールしても 上にかぶせたまま ということでしたら fixed を…

みんなの回答

  • noris02
  • ベストアンサー率74% (56/75)
回答No.1

スクロールしても 上にかぶせたまま ということでしたら fixed をつかってみてはどうでしょう　

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • レイヤーを背景だけ透過させたい

    お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートの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
  • chromeのcss位置ズレについて

    CSSのpositionで画像を上にかぶせて表示させています。 そこでIE,firefoxはOKなのですがchromeだけ15pxぐらい下にずれてしまいます。 下記の２つのハックを使った場合、display:noneだと反映されたのですが positionにすると何も反映しなくなります。 ハックはpositionには効かない、などあるのでしょうか？ どなたか教えていただけますでしょうか。 よろしくお願いいたします。 ----------------------- body:nth-of-type(1) #selector { position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85; } ----------------------- @media screen and (-webkit-min-device-pixel-ratio:0){ #selector { position : absolute;top:960px;left:0px;filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85; } }

    • ベストアンサー
    • CSS
  • div要素を半透明にして且つ外枠をつけたい

    div要素を半透明にして且つ外枠をつけたいです。 下記のように書いたのですが、borderも一緒に半透明になってしまいます。添付画像の様にするにはどうしたらよいでしょうか？ 教えてください。 <html> <head> <style> div{ background: green; opacity:0.2; filter: alpha(opacity=20); border: 1px solid green; } #hoge{ position: absolute; top: 0; left: 50; width :50; height :50; } </style> </head> <body> あいうえお <div id='hoge' ></div> </body>

    • ベストアンサー
    • HTML
  • 背景画像をCSSコードで半透明にしたいのですが・・

    背景画像をCSSコードで半透明にしたいのですが・・ 考えたコードはこのようです。 #sub{ background-image: url(背景画像); background-repeat: no-repeat; background-position: center center; float:left; filter:alpha(opacity=50) opacity:0.5; width:540px; /* D */ height:300px; } これだと背景を半透明にはできませんでした。 どのようにすればいいですか？

    • ベストアンサー
    • HTML
  • float: leftで横に並べたら、サファリだけ

    float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。 ＩＥやファイヤーフォックスではピッタリ表示できています。 問題の箇所は以下です。 <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-001.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-002.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span> </p> </div> <div style="float: left;"> <p style="position: relative;"> <img src="./img/img-003.png" width="240" height="150" /> <br /> <span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span> </p> </div> どうすればサファリの隙間を消せるでしょうか？

    • ベストアンサー
    • HTML
  • Jacascript初心者です。

    Jacascript初心者です。 最近たまに、webページ全体が暗くなり、ウインドウがでて来るサイトが有りますよね。 あれを実現するのにjQuery等のライブラリを使えば早い事は解っているのですが、自分で一度実装して見たいと思い下記のようなスクリプトを書いてみたらそれっぽくはなったのですが、一つ問題が発生しました。 画面サイズを拡大しても当然ながら、上に被せた透明要素が連動せず、あまりよろしく有りません。。 これを解決すべく、色々考えたのですが、透明要素のサイズをfor文などを駆使して連続的に変える力技しか思い浮かびませんでした。 そこで、皆さんの力を借りたく投稿します。 //safariでのみ動作確認 function fadeWindow() { var shadeEl = document.createElement("div"); var width = window.innerWidth; var height = window.innerHeight; shadeEl.id = "shade"; shadeEl.style.width = width + "px"; shadeEl.style.height = height + "px"; document.body.appendChild(shadeEl); } 定義済みのCSS #shade{ background-color:#000000; position:absolute; top:0px; left:0px; filter: alpha(opacity=50); 　 -moz-opacity: 0.5; 　opacity: 0.5; } どうぞよろしくお願いします。

  • 4：3とパノラマ写真の混在スライドショーについて

    ホームページに写真のスライドショーを用意しています。 他板でのアドバイスで動かなくなったものが動くようになりました。 写真の表示もできるようなって良かったのですが、 若干問題があり、アドバイスをお願いしたいのです。 ＯＳ：win7 ＩＥ：１１ 下記のソースを頂きましたが・・・・ 写真 　4：3表示・・・全体が表示されない（はみ出した感じ） 　　写真サイズ　800×600ですが　→　1068×800と表示サイズが大きくなっています 　パノラマ：高さに合わせて左右がカットされたようになります。 　　　　　　　800×284ですが　→　2254×800の表示サイズの様です 　　これも大きくはみ出しています 　どちらも、height:600pxとなっていますが、web上では800pxになっています ●なぜ高さが600pxの設定が有効にならないのか 狙いは、横方向800pxでパノラマにも対応したい （パノラマの場合、高さ方向は低く表示する） <STYLE type="text/css"> #container {width:100%;text-align:center;} #slideshow {margin:0 auto;width:800px;height:600px;text-align:left;} #slideshow div {width:800px;height:600px;overflow:hidden;position:relative;} #slideshow div div {top:0;left:0;position:absolute;} #slideshow ul {width:800px;} #slideshow ul li {width:100px;height:75px;float:left;display:inline;} #slideshow .active {filter:alpha(opacity=100)!important;-moz-opacity:1!important;opacity:1!important;} --> </STYLE> 4：3の写真（800：600）の全体表示 パノラマ写真800サイズの高さは自動調整 ができると良いのですが・・・ ここまで書いて、素人ですというのも申し訳ないように思いますが アドバイスをいただけないでしょうか

    • ベストアンサー
    • HTML
  • 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
  • CSSでfloatした要素の高さを100%にしたい

    はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。　heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html> 

    • ベストアンサー
    • CSS
  • スライドショーが出来ません。。

    web作成は全くの初心者で、今までいろんなサイトの見本のhtmlをコピペしてなんとか少しづつ形にになってきたのですが、どうしてもスライドショーができません、、、 こちらのサイト（http://kowaza.boo.jp/）の＜スライドショー＞　　*　 フェードインしながら次々と画像を表示　*　というのを参考に作ってみたのですが、全然スライドショーになりません。 何がいけないのか全く分からないのですが、どこかおかしなところがありましたら教えて下さい。どうぞよろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>スライドショーの実験</title> <script type="text/JavaScript"> <!-- var myspd = 200; 　　　　　　　　　　 var myx = 5; 　　　　　　　　　　　 var mypic = new Array("myp1","myp2","myp3");　　　 var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } //--> </script> </head> <body onLoad="mygo()"> <span style=" position:absolute ; top:20px ; left:20px ; z-index:1;"> <img src="top.jpg" width="300" name="myp1" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:40px ; left:50px ; z-index:2 ;"> <img src="before.jpg" width="300" name="myp2" border="0" style="filter:alpha(opacity=0);"></span> <span style=" position:absolute ; top:60px ; left:80px ; z-index:3 ;"> <img src="after.jpg" width="300" name="myp3" border="0" style="filter:alpha(opacity=0);"></span> </body> </html>

はじめてのキーボード KEY PALETTOのBluetoothの互換性について
このQ&Aのポイント
  • 子供向けキーボード『はじめてのキーボード KEY PALETTO』のBluetooth接続についてわからないことがあります。キーボードはiPad用とWindows用の2つのモデルがありますが、iPad用を購入した場合、Windowsパソコンでも使用できるのでしょうか？
  • また、キーボードのキーの一部が異なる場合でも、配置が同じ個所は同じ機能になるのでしょうか？
  • 皆さんのご意見や経験を教えていただけると助かります。よろしくお願いします！
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する