在子容器上禁用模糊過濾器

因此，我正在爲網站的主頁/封面工作，並且我有一個父容器和一個子容器。在子容器上禁用模糊過濾器

父容器有一個blur(10px)過濾器的背景圖像，但過濾器也適用於子容器，這是我不想要的。

我已經嘗試了其他類似問題的一些解決方案，但沒有人幫助過，或者我可能沒有做對。

我試圖設置子容器z-index: 9999和父母z-index: 0。我還發現了另一個可以工作的解決方案，因爲我們有相同的設置但很混亂。

解決的辦法是添加這行代碼background > :not(header) { webkit-filter: blur(10px); }。 background是父母，header是孩子。（導航也不會模糊，但我想先獲得一個元素）。

我甚至試圖將容器的位置從absolute更改爲relative，反之亦然。

這是我的HTML文件（CSS和HTML在同一個文件中）。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
@font-face { 
    font-family: "Candy"; 
    src: url('font/Candy.otf') format("opentype"); 
} 
@font-face { 
    font-family: "DancingScript"; 
    src: url('font/DancingScript.ttf') format("truetype"); 
} 
body { 
    margin: 0; 
    padding: 0; 
} 
background { 
    position: absolute; 
    background: url("images/cover_page.jpg") no-repeat; 
    -webkit-filter: blur(10px); 
    display: block; 
    height: 100%; 
    width: 100%; 
    z-index: 0; 
} 
background > :not(header) { 
    -webkit-filter: blur(10px); 
} 
header { 
    font-face: "Candy"; 
    font-size: 150px; 
    text-align: center; 
    color: #FFF; 
} 
nav { 
    color: #FFF; 
    font-face: "DancingScript"; 
    font-size: 25px; 
} 
nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
nav li { 
    display: inline-block; 
} 
header, nav { 
    display: block; 
    position: relative; 
    z-index: 9999; 
} 
</style> 
<title></title> 
</head> 
<body> 
<background> 
    <header>Rustic Rentals</header> 
    <nav> 
     <ul> 
      <li>Rentals</li> 
      <li>Sales</li> 
      <li>Contact</li> 
     </ul> 
    </nav> 
</background> 
</body> 
</html>

結果可以看到here。

來源

2015-06-02 xR34P3Rx

有沒有這樣的''HTML標記 – dippas

不存在，它的HTML5，我可以彌補標籤。 – xR34P3Rx

的幾個注意事項：

沒有background HTML標籤，
當你申請filters記得不要只使用-webkit-
沒有font-face屬性來聲明你的字體使用，而應該使用font-family

考慮到這一點，一個爲你解決[R問題是創建一個空兒div和應用過濾器相同的空div必須具有較低z-index然後它的兄弟（因爲你已經有了）

這裏是一個片段：

@font-face { 
 
    font-family: "Candy"; 
 
    src: url('font/Candy.otf') format("opentype"); 
 
} 
 
@font-face { 
 
    font-family: "DancingScript"; 
 
    src: url('font/DancingScript.ttf') format("truetype"); 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    position: absolute; 
 
    background: url("http://rusticrentals.oldtreasuresfurniture.com/images/cover_page.jpg") no-repeat; 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 0; 
 
    -moz-filter: blur(10px); 
 
    -o-filter: blur(10px); 
 
    -ms-filter: blur(10px); 
 
    filter: blur(10px);} 
 

 
header { 
 
    font-family: "Candy"; 
 
    font-size: 150px; 
 
    text-align: center; 
 
    color: #FFF; 
 
} 
 
nav { 
 
    color: #FFF; 
 
    font-family: "DancingScript"; 
 
    font-size: 25px; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav li { 
 
    display: inline-block; 
 
} 
 
header, 
 
nav { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 9999; 
 
}

<main> 
 
    <div></div> 
 
    <header>Rustic Rentals</header> 
 
    <nav> 
 
    <ul> 
 
     <li>Rentals</li> 
 
     <li>Sales</li> 
 
     <li>Contact</li> 
 
    </ul> 
 
    </nav> 
 
</main>

來源

2015-06-02 03:14:19 dippas

'font-face'作爲屬性是一個錯字，idk我在想什麼。我也知道使用'-moz-'，'-o-'等等......我只是使用'-webkit'，因爲我使用chrome，之後我通常會做整個瀏覽器兼容性階段。 – xR34P3Rx

這幫助你解決你的問題？ – dippas

今晚我試了一下，我還沒有能夠整天在網站上工作。 – xR34P3Rx

在子容器上禁用模糊過濾器

回答

相關問題