背景模糊 - CSS

Question

你好我試着讓這個背景模糊這樣的圖像，所以我想知道我是否可以使用CSS3，或者我需要使用Javascript和Jquery：
如果我只使用css如何使模糊響應。

這是我的簡單代碼：

 #bg{ background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; } #bg { background-position: center top; padding: 70px 90px 120px 90px; } #search-container { position: relative; } #search-bg { /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 99; /* Pull the background 70px higher to the same place as #bg's */ /*background-position: center -70px;*/ -webkit-filter: blur(10px); filter: blur(10px); } #search { position: relative; z-index: 100; padding: 20px; background: rgba(34,34,34,0.75); } #search h2{ color:#ffffff; } 

 <div id="bg"> <div id="search-container"> <div id="search-bg"></div> <div id="search"> <h2>Hello World</h2> </div> </div> </div> 

Answer 1

模糊所有背景

您無法輕松將效果附加到背景圖像。 您應該使用軟件模糊它並將其設置為背景圖像。

你可以在css中有一個模糊背景，div放在你的網站內容后面，並模糊這個div： http ： //codepen.io/aniketpant/pen/DsEve

<div class="background-image"></div>
<div class="content"> Your text </div>

---

模糊元素背后

您可以使用CSS3背景過濾器獲得此結果：

https://webkit.org/blog/3632/introducing-backdrop-filters/

Answer 2

你可以使用background-attachment:fixed; 並且也將它設置在blured容器中， background-attachment用於將bg設置在同一位置，一個可以模糊。

使用偽而非額外div的示例：

 #bg { background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center top; padding: 70px 90px 120px 90px; } #search-container { position: relative; } #search-container:before {/* add same bg-image with same backgrounds values to match main container */ content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 0; background-image: url('http://store6.up-00.com/2017-03/149079039538851.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center top; background-attachment: fixed;/* make it match #bg position and size */ -webkit-filter: blur(5px); filter: blur(5px); } #search { position: relative; z-index: 1; padding: 20px; background: rgba(34, 34, 34, 0.5); display:flex; } #search h2 { color: #ffffff; margin:auto; } 

 <div id="bg"> <div id="search-container"> <div id="search"> <h2>Hello World</h2> </div> </div> </div>