Question

我正在尝试使用模糊滤镜创建CSS叠加层。

#container {
  position: relative;
  height: 500px;
  width: 500px;
}

#content {
  color: #fff;
}

button {
  background-color: #fff;
  border-radius: 3px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font-size: 14pt;
  font-weight: 700;
  padding: .75em 3.75em;
}

#content-not-blurred {
  color: #fff;
}

#overlay {
  top:0;
  left:0;
  right:0;
  bottom:0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
  color: rgba(209, 206, 209, 0.9);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000, rgba(0, 0, 0, .5));
  filter: url('#blur');
  filter: blur(5px);
}

<div id="container">
  <div id="overlay">
    <div id="content">
      <p>I'm mr. myseeks</p>
      <button>I want feedback</button>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="blur">
          <feGaussianBlur stdDeviation="5" />
        </filter>
      </defs>
    </svg>
  <div id="content-not-blurred">
    <p>Look at me!</p>
  </div>
</div>

我在此Codepen中创建了一个示例：

https://codepen.io/hetzbr/pen/zJLEaz

当我有一个白色按钮作为内容时，它非常突出，并且很难阅读覆盖在模糊效果上的任何内容。

有没有一种方法可以使内容颜色不那么突出？

我知道我可以为内容添加不透明度以使背景内容不那么可见，但是很好奇是否有一种方法可以使文本仍然具有不错的模糊效果，而按钮不会像拇指一样伸出来。

Answer 1

除了brightness(50%);之外，您还可以添加blur过滤器以使模糊的元素变暗，从而与白色文本形成更多的对比度。

#container {
  position: relative;
  height: 500px;
  width: 500px;
}

#content {
  color: #fff;
}

button {
  background-color: #fff;
  border-radius: 3px;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font-size: 14pt;
  font-weight: 700;
  padding: .75em 3.75em;
}

#content-not-blurred {
  color: #fff;
}

#overlay {
  top:0;
  left:0;
  right:0;
  bottom:0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
  color: rgba(209, 206, 209, 0.9);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), #000, rgba(0, 0, 0, .5));
  filter: url('#blur') brightness(50%);
  filter: blur(5px) brightness(50%);
}

<div id="container">
  <div id="overlay">
    <div id="content">
      <p>I'm mr. myseeks</p>
      <button>I want feedback</button>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="blur">
          <feGaussianBlur stdDeviation="5" />
        </filter>
      </defs>
    </svg>
  <div id="content-not-blurred">
    <p>Look at me!</p>
  </div>
</div>

Answer 2

您只能在按钮上添加不透明度。这样，您仍然可以在容器上使用正确的颜色，但是按钮的突出程度会更低。

在您的CodePen中，我添加了opacity: .5来完成您的button，这似乎可以解决问题。

Your example with lower-opacity buttons

CSS模糊使背景内容不可见

2 个答案: