使背景div与内容相同，而不使用javascript

时间：2016-07-03 21:41:04

标签： javascript html css background

我正在尝试在桌子上实现磨砂玻璃效果（半透明，白色，模糊背景），以使内容可读，同时具有漂亮的背景。我几乎在下面工作：

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>

然而它有点脆弱，因为它依赖于Javascript来正确设置背景div的尺寸。首先，如果放大，它们会停止匹配，白色会溢出。我猜测有一个更正确/更健壮的方法来使用CSS，但我在这方面的知识和耐心极限。其他建议也将受到赞赏。

2 个答案:

答案 0 :(得分：2)

基本技术是确保表是唯一占用父项大小的表（因此它不能绝对定位），并且父项具有相对定位。然后，您可以给表格的兄弟姐妹绝对定位，并将顶部/底部/左/右定位设置为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 我也摆脱了不必要的表包装器，因为它让事情变得更加烦人。

答案 1 :(得分：1)

我知道这不是你想要的，但我有一个简单的解决方案 只需添加到body标签＆＃34; onresize =＆＃34; function（）＆＃34; - 在body resize上调用js函数。

所以代码看起来像这样

＆＃13;
＆＃13; 
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';
            }
        };
＆＃13; 
#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;
        }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题