-2
すでに、私は、Blizzardのウェブサイト（www.blizzard.com）のナビゲーションの背景が何とか「ぼやけている」ことを知りました。このボックスの境界線がぼやけていないので、CSSの通常のぼかしフィルタの意味ではありません。 私の現在のプロジェクトでは、この効果を実装したいと思いますが、Blizzardのソースコードがまったくわからないので、誰かがそのことをどのように説明することができれば幸いです。Blizzardウェブサイトのようなぼやけたボックス
ああとところで..私はこのフィドルで2つの透明の箱をぼかしたい：
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 {
\t position: fixed;
\t z-index: 300;
\t width: 100%;
}
#costumTopPanel {
\t width: 100%;
\t padding: 10px 0px;
\t background-color: #0c0c0c;
\t z-index: 200;a
}
#costumTopPanelContent {
\t display: flex;
\t justify-content: space-between;
}
#costumTopPanelContentLeft {
\t color: #FFF;
}
#costumTopPanelContentRight {
\t color: #FFF;
}
#costumMainMenu {
background-color: rgba(12,12,12,0.5);
\t padding: 25px 0px;
\t width: 100%;
\t background-size: cover;
\t overflow: hidden;
}
#costumMainMenuContent {
\t display: flex;
\t justify-content: space-between;
}
.pageHeaderLogoLarge {
\t position: absolute;
\t left: 40.3%;
\t top: 29%;
}
#costumLogoBackground {
\t background: url('http://atlas.irs-media.de/images/atlasgamingbilder/headerBG.svg') no-repeat; \t
\t height: 120px;
\t width: 530px;
\t margin: 0 auto;
}
#pageHeaderPanel {
\t position: relative; \t
}
#costumMainMenuContentLeft {
\t color: #FFF; \t
}
#costumMainMenuContentRight {
\t color: #FFF; \t
}<div id="costumNavigationBar"> \t
\t <div id="costumTopPanel">
\t \t <div class="layoutBoundary">
\t \t \t <div id="costumTopPanelContent">
\t \t \t \t <div id="costumTopPanelContentLeft">
\t \t \t \t \t Icons
\t \t \t \t </div>
\t \t \t \t <div id="costumTopPanelContentRight">
\t \t \t \t \t Login
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div id="costumMainMenu">
\t \t <div class="layoutBoundary">
\t \t \t <div id="costumMainMenuContent">
\t \t \t \t <div id="costumMainMenuContentLeft">
\t \t \t \t \t Menu Left
\t \t \t \t </div>
\t \t \t \t <div id="costumMainMenuContentMid">
\t \t \t \t \t Logo
\t \t \t \t </div>
\t \t \t \t <div id="costumMainMenuContentRight">
\t \t \t \t \t Menu Right
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div id="costumLogoBackground"></div>
</div>