자바 스크립트가없는 내용으로 배경 div를 만듭니다.

좋은 배경을 가지고 내용을 읽을 수 있도록 표에 서리로 덥은 유리 효과 (반투명, 흰색, 흐린 배경)를 얻으려고합니다. 나는 꽤 많이 아래 작업이 : 그것은 조금 약하고 그러나자바 스크립트가없는 내용으로 배경 div를 만듭니다.

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>

을이 DIV 올바르게 배경의 크기를 설정하는 자바 스크립트에 의존한다. 한 가지는 줌인하면 일치를 멈추고 흰색은 넘쳐납니다. CSS를 사용하여보다 정확하고 견고한 방법이 있다고 생각하지만 여기서 지식과 인내심의 한계에 도달했습니다. 다른 제안은 또한 평가 될 것입니다.

출처

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

이것이 내 문제의 일부라고 생각했지만 테이블에서 절대 위치를 제거하면 모든 것이 망가졌습니다. 상대적인 테이블을 만드는 것이 내가 필요로하는 것 같았습니다. 왜 나는 그것을 필요로합니까? –

기본적으로 배치 된 요소 (정적 위치가없는 모든 요소)는 정적 요소 앞에 표시됩니다. 그래서 우리는 두 테이블이 같은 규칙을 다시 따르도록 테이블 위치를 결정합니다. 그보다 조금 더 복잡합니다. 솔직하게 말해서, 왜 흰색 오버레이 뒤에있는 대신 테이블이 완전히 사라지는 지 잘 모르겠습니다. 그러나 엄지 손가락의 규칙은, 무언가가 사라지면 그것을 상대적으로 만들고 도움이되는지 확인하는 것입니다. 자세한 내용은 스태킹 내용을 참조하십시오. –

멋진 정보, 이해해 주셔서 감사합니다! –

나는 당신이 찾고있는 정확하게 밤은 알고 있지만 난 그냥 body 태그 "하여 onResize ="함수() "에 추가 간단한 해결책이 - 바디 크기 조정에 JS 함수를 호출

그래서를. 코드는 기본 기술은 테이블 (그래서 절대적으로 위치 할 수 없을) 부모의 크기를 차지하는 유일한 있는지 확인하는 것입니다이

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를 만듭니다.

답변

관련 문제