在模糊的背景上的锋利边缘 [英] Sharp edges on blurred background

问题描述

对于我当前正在处理的网站，我需要一个背景模糊的标题.我使用css :: before 来做到这一点，但我需要保留锋利的边缘.

这是我当前得到的:

(您可能需要全屏打开它才能看到模糊的边缘.)

我现在拥有的代码是:(

我尝试添加一个容器div，将其设置为 overflow:hidden ，以便可以将背景稍大一些，以便将其剪裁并隐藏毛刺的边缘，但这并没有.工作.我也宁愿不必拥有不必要的div，因为这就是我将 :: before 用作背景图像的全部原因.

我想不出任何其他解决方案，而且我能找到的关于如何在模糊滤镜上获得优势的所有解决方案都适用于图像，而不适用于背景图像，那么我该怎么做这个吗?

解决方案

我不确定是否有解决此问题的正确方法.模糊滤镜会影响整个元素，包括边缘.您可以通过使元素大于容器的大小来隐藏边缘，而父元素会得到 overflow:hidden; -参见demo:

  * {padding:0;边距:0;框大小:border-box；}html，正文{高度:100％;}.blurred {高度:100％;宽度:50％;职位:相对向左飘浮;margin:0自动;溢出:隐藏border:3px solid #FFF;padding:1em;颜色:#FFF;}.blurred:before {背景:url(https://placeimg.com/1000/662/any)无重复固定顶部；背景尺寸:cover;-webkit-filter:模糊(5px)对比度(125％)亮度(75％);滤镜:模糊(5px)对比度(125％)亮度(75％);内容:"";高度:110％;宽度:110％;显示:块；位置:绝对；z-index:-1；顶:0;左:0;}.blurred.scaled:在{transform:scale(1.1);}  

之前

 < div class =模糊比例">缩放背景</div>< div class ="blurred">正常背景</div>  

jsFiddle

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?

解决方案

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

这篇关于在模糊的背景上的锋利边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！