整個網站（css過濾器）在Webkit中模糊，但不在邊緣

-3

我對整個html/css世界都很陌生，所以我在每個地方都犯了一些非常基本的錯誤。無論如何，作爲一個學校項目，我們應該創建一個關於虛擬遊戲工作室的網頁。整個網站（css過濾器）在Webkit中模糊，但不在邊緣

這是迄今爲止我們的項目： https://github.com/giddorah/webpage

正如你可以看到，該網站的偉大工程，在微軟邊緣看起來相當不錯（吹牛，說大話）...但由於某些原因基於Webkit的瀏覽器都模糊整個頁面。

我只是想讓背景變得模糊。

任何人都可以看到任何明顯的我正在做什麼......我將與我解釋這是新的。

2017-02-09 Johan Spånberg

背景和動畫等一下，你要求我們***安裝**（從回購克隆）*網站才能看到它？您是否意識到網站是爲了向訪問者呈現內容的概念而發明和形成的，而無需除瀏覽之外的任何其他內容？或者你跳過了這一課？我建議你創建一個你正在描述的問題的[mcve]。有關提問的問題，請參見[問]的建議。 –

哦，不，不。我在Github上有了這個頁面，所以我認爲這是一個很好很簡單的方式讓我向你展示代碼。 –

的問題是，你申請的模糊到整個div.background這將適用於所有的孩子，你能做的最好的只是移動.hidden-scrollbar外背景的這樣

<div class="background"></div> 
<div class="hidden-scrollbar">....</div>

然後加入旁邊的背景

position: absolute; 
top: 0; 
left: 0; 
right: 0;

UPDATE

或者你也可以只添加在:before僞類

.background:before { 
    content:""; 
    -webkit-filter: blur(15px); 
    -moz-filter: blur(15px); 
    -o-filter: blur(15px); 
    -ms-filter: blur(15px); 
    filter: blur(15px); 
    background: url(../img/newback.jpg) repeat-y; 
    -webkit-animation: backgroundScroll 120s linear infinite; 
    animation: backgroundScroll 120s linear infinite; 
    width: 100vw; 
    height: 100vh; 
    position: fixed; 
} 
.background { 
    width: 100vw; 
    height: 100vh; 
    top: -5%; 
    left: -5%; 
    z-index: 0; 
}

來源

2017-02-09 23:30:13 stalin

謝謝！這真的有所作爲。很好的解釋。 :) –

整個網站（css過濾器）在Webkit中模糊，但不在邊緣

回答

相關問題