像暴雪网站一样模糊的盒子

Question

前段时间我曾经看到，暴雪网站（www.blizzard.com）导航的背景是某种程度上的模糊＆＃34;。不是CSS中的正常模糊滤镜，因为此框的边框本身并不模糊。 在我目前的项目中，我想实现这个效果，但由于我根本不了解暴雪的源代码，如果有人能够解释所有这些是如何工作的，我会很高兴。

哦，顺便说一句..我想模糊这个小提琴中的2个透明盒子：

＆＃13;

＆＃13;

html, body {
  padding: 0;
  margin: 0; 
  width: 100%;
  height: 100%;
  
}
body {
  background-image: url("https://s-i.huffpost.com/gen/1914112/images/o-PARIS-facebook.jpg");
}
#costumNavigationBar {
	position: fixed;
	z-index: 300;
	width: 100%;
  
}
#costumTopPanel {
	width: 100%;
	padding: 10px 0px;
	background-color: #0c0c0c;
	z-index: 200;a
}
#costumTopPanelContent {
	display: flex;
	justify-content: space-between;
}
#costumTopPanelContentLeft {
	color: #FFF;
}
#costumTopPanelContentRight {
	color: #FFF;
}


#costumMainMenu {
  background-color: rgba(12,12,12,0.5);
	padding: 25px 0px;
	width: 100%;
	background-size: cover;
	overflow: hidden;
}
#costumMainMenuContent {
	display: flex;
	justify-content: space-between;
}
.pageHeaderLogoLarge {
	position: absolute;
	left: 40.3%;
	top: 29%;
}
#costumLogoBackground {
	background: url('http://atlas.irs-media.de/images/atlasgamingbilder/headerBG.svg') no-repeat;	
	height: 120px;
	width: 530px;
	margin: 0 auto;
}

#pageHeaderPanel {
	position: relative;	
}

#costumMainMenuContentLeft {
	color: #FFF;	
}
#costumMainMenuContentRight {
	color: #FFF;	
}

＆＃13;

<div id="costumNavigationBar">	
	<div id="costumTopPanel">
		<div class="layoutBoundary">
			<div id="costumTopPanelContent">
				<div id="costumTopPanelContentLeft">
					Icons
				</div>
				<div id="costumTopPanelContentRight">
					Login
				</div>
			</div>
		</div>
	</div>
	<div id="costumMainMenu">
		<div class="layoutBoundary">
			<div id="costumMainMenuContent">
				<div id="costumMainMenuContentLeft">
					Menu Left
				</div>
				<div id="costumMainMenuContentMid">
					Logo
				</div>
				<div id="costumMainMenuContentRight">
					Menu Right
				</div>
			</div>
		</div>
	</div>
	<div id="costumLogoBackground"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于您特别询问暴雪如何实现这一点，答案是模糊中没有涉及CSS。相反，他们将模糊直接烘焙到桌面旋转木马中每个图像文件的前60px中。

这是其中一张幻灯片，您可以看到：
https://bnetcmsus-a.akamaihd.net/cms/gallery/pt/PTRQ0098SJYL1509731760219.jpg

话虽如此，这是使用::before or ::after pseudo-element，模糊filter属性和background-attachment: fixed实现带有实线边框的模糊框的一种方法。

＆＃13;

＆＃13;

body {
  background-image: url("https://s-i.huffpost.com/gen/1914112/images/o-PARIS-facebook.jpg");
  background-attachment: fixed;
  margin: 0;
}

.blur-box {
  border: 1px solid rgba(255, 255, 255, .2);
  margin: 1em;
  height: 50vw;
  width: 50vw;
  position: relative;
  overflow: hidden;
}

.blur-box::before {
  background-image: url("https://s-i.huffpost.com/gen/1914112/images/o-PARIS-facebook.jpg");
  background-attachment: fixed;
  content: '';
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  -webkit-filter: blur(.5em);
  filter: blur(.5em);
}

＆＃13;

<div class="blur-box"></div>

＆＃13;

＆＃13;

＆＃13;