バックグラウンドdivをjavascriptのないコンテンツと同じにする

テーブル上で曇りガラス効果（半透明、白い、ぼやけた背景）を達成しようとしています。それは正しくDIVの背景の寸法を設定するためにJavaScriptに依存として、それは少し壊れやすいのですがバックグラウンドdivをjavascriptのないコンテンツと同じにする

if (true /* set to false to test CSS */) { 
 
    white = document.getElementsByClassName('white')[0]; 
 
    table = document.getElementsByClassName('table')[0]; 
 
    white.style.width = table.clientWidth + 'px'; 
 
    white.style.height = table.clientHeight + 'px'; 
 
}

#container { 
 
    margin: 20px; 
 
    position: relative; 
 
} 
 
.image-background { 
 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/pelican.jpg) no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 
.white { 
 
    background-color: white; 
 
    /* My attempt at making the div fill the necessary space, not working */ 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.blur { 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-filter: url(#blur-filter); 
 
    -moz-filter: url(#blur-filter); 
 
    -o-filter: url(#blur-filter); 
 
    -ms-filter: url(#blur-filter); 
 
    filter: url(#blur-filter); 
 
    opacity: 0.5; 
 
} 
 
#container > div { 
 
    position: absolute; 
 
} 
 
table.table > tbody > tr > td { 
 
    border: solid 1px black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body class="image-background"> 
 
    <div id="container"> 
 
    <div class="white"> 
 
     <div class="blur image-background"></div> 
 
    </div> 
 
    <div> 
 
     <table class="table"> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>1</td> 
 
      <td>2</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <defs> 
 
    <filter id="blur-filter"> 
 
     <feGaussianBlur stdDeviation="5"></feGaussianBlur> 
 
    </filter> 
 
    </defs> 
 
</svg>

を：私はかなりそれは以下の作業を持っています。 1つは、ズームインするとマッチングが止まり、白い部分がこぼれ落ちます。私はCSSでこれを行うより正確で頑強な方法があると思っていますが、私はここで私の知識と忍耐の限界にいます。他の提案も高く評価されます。そのボディサイズ変更上のJS関数を呼び出す

出典

2016-07-03 Alex Hall

ようになります。親は相対的な位置づけを持っていると仮定する。テーブルの兄弟の絶対位置を指定し、上/下/左/右の位置を0に設定すると、テーブルの兄弟が強制的にエッジに移動します。

は、ここで基本的なコンセプトの証明です：

.container { 
 
    position: relative; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
}

<div class="container"> 
 
    <div class="overlay"></div> 
 
    <div class="table">Content</div> 
 
</div>

そしてここでそれに基づいて、あなたのコードのバージョンです：それは作っていたので、私はまた、不要なテーブルラッパーを処分したhttp://codepen.io/anon/pen/mEwVGx?editors=1100 物事はより迷惑な。

出典

2016-07-03 22:00:52

これは私の問題の一部だと思っていましたが、テーブルから絶対的な位置を取り除くだけで、すべてのものが損なわれました。テーブルを相対的に作っているように見えました。なぜ私はそれが必要なのですか？ –

基本的に、配置された要素（静的な位置を持たないものすべて）は静的な要素の前に表示されます。そこで、テーブルを.tableにして、2人が同じルールに従うことを確認します。それより少し複雑です。正直なところ、なぜ白いオーバーレイの後ろにあるのではなく、テーブルが完全に消えるのか分かりません。しかし、経験則は、何かが消えたら、それを相対的に作り、それが役立つかどうかを確認することです。より深い情報のためのスタッキングコンテクストを読む –

クール、理解してくれてありがとう！ –

私はそれはあなたが探しているが、私はちょうどbodyタグ「さらにonResize =」機能（）」に追加シンプルなソリューションを持って正確に何イマイチ知っています。コードは、基本的な技術は、テーブルは（それが絶対的に配置することはできません）親にサイズを占める唯一のものであることを確認することです。この

function settable(){ 
 
      if (true /* set to false to test CSS */) { 
 
       white = document.getElementsByClassName('white')[0]; 
 
       table = document.getElementsByClassName('table')[0]; 
 
       white.style.width = table.clientWidth + 'px'; 
 
       white.style.height = table.clientHeight + 'px'; 
 
      } 
 
     };

#container { 
 
      margin: 20px; 
 
      position: relative; 
 
     } 
 

 
     .image-background { 
 
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/pelican.jpg) no-repeat center center fixed; 
 
      background-size: cover; 
 
     } 
 

 
     .white { 
 
      background-color: white; 
 
      /* My attempt at making the div fill the necessary space, not working */ 
 
      top: 0px; 
 
      left: 0px; 
 
      right: 0px; 
 
      bottom: 0px; 
 
      width: 100%; 
 
      height: 100%; 
 
     } 
 

 
     .blur { 
 
      width: 100%; 
 
      height: 100%; 
 
      -webkit-filter: url(#blur-filter); 
 
      -moz-filter: url(#blur-filter); 
 
      -o-filter: url(#blur-filter); 
 
      -ms-filter: url(#blur-filter); 
 
      filter: url(#blur-filter); 
 
      opacity: 0.5; 
 
     } 
 

 
     #container > div { 
 
      position: absolute; 
 
     } 
 

 
     table.table > tbody > tr > td { 
 
      border: solid 1px black; 
 
     }

<html> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 
<body class="image-background" onload="settable()" onresize="settable()"> 
 
    <div id="container"> 
 
     <div class="white"> 
 
      <div class="blur image-background"></div> 
 
     </div> 
 
     <div> 
 
      <table class="table"> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>1</td> 
 
        <td>2</td> 
 
       </tr> 
 
       <tr> 
 
        <td>3</td> 
 
        <td>4</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
    </div> 
 
</body> 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <defs> 
 
     <filter id="blur-filter"> 
 
      <feGaussianBlur stdDeviation="5"></feGaussianBlur> 
 
     </filter> 
 
    </defs> 
 
</svg>

出典

2016-07-03 21:58:13 Daniel

ありがとうございました。私はこのようなことについて疑問を抱きましたが、間違いなく心に留めておきます！ –

バックグラウンドdivをjavascriptのないコンテンツと同じにする

答えて

関連する問題