Sharp edges on blurred background

问题

For a site I am currently working on, I need a header that has a blurred background. I used the css ::before to do this, but I need to retain the sharp edges.

Here is what I currently get:

(You might need to open it in full-screen to see the blurred edge.)

The code of what I have right now is: (View on CodePen)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

header {
  width: 100%;
  min-height: 60%;
  padding: 50px 100px;
  text-align: center;
  color: white;
}

header nav ul {
  list-style: none;
}

header nav li {
  display: inline-block;
  padding: 5px;
}


/* Header background */

.header::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  content: '';
  display: block;
  min-height: 60%;
  width: 100%;
  background: url(https://placeimg.com/1000/662/any) no-repeat fixed top;
  -webkit-filter: blur(5px) contrast(125%) brightness(75%);
          filter: blur(5px) contrast(125%) brightness(75%);
}

<header class="header">
  <nav>
    <ul>
      <li>Lorem</li>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
  </nav>
  <h1>Title</h1>
  <p>Lorem ipsum dolor osit amet, consectetur adipiscing elit.</p>
</header>

Whilst I want it to look like this:

I tried adding a container div, set to overflow: hidden, so that I could make the background slightly bigger, so it would be clipped and the burred edges would be hidden, but that didn't work. I'd also rather not have to have an unnecessary div, since that is the whole reason I used ::before for the background image.

I can't think of any other solutions, and all the solutions that I can find for how to get a sharp edge on blur filters are for images, and do not work for background images, so how could I go about doing this?

回答1:

I am not sure if there is a correct way to solve this. The blur filter affects the entire element, including edges. You can hide the edges by making the element bigger than it's container, while the parent gets overflow:hidden; - See demo:

* { padding: 0; margin: 0; box-sizing: border-box; }

html, body { height: 100%; }

.blurred {
  height:100%;
  width:50%;
  position: relative;
  float:left;
  margin:0 auto;
  overflow:hidden;
  border:3px solid #FFF;
  padding:1em;
  color:#FFF;
}

.blurred:before {
  background: url(https://placeimg.com/1000/662/any) no-repeat fixed top;
  background-size:cover;
  -webkit-filter: blur(5px) contrast(125%) brightness(75%);
  filter: blur(5px) contrast(125%) brightness(75%);
  content:"";
  height: 110%; width: 110%;
  display: block;
  position: absolute;
  z-index:-1;
  top:0; left:0;
}

.blurred.scaled:before {transform:scale(1.1);}

<div class="blurred scaled">
Scaled background
</div>

<div class="blurred">
Normal background
</div>

jsFiddle

来源：https://stackoverflow.com/questions/35671088/sharp-edges-on-blurred-background

标签

html

css

css-filters