CSS3 - 動畫背景圖像過濾器

我想弄清楚爲我的網站的背景過濾器設置動畫的解決方案。
我希望它在頁面加載時從銳利變爲模糊，我知道該怎麼做，但由於我的背景是body，添加過濾器會影響所有內容。CSS3 - 動畫背景圖像過濾器

body { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
overflow: hidden; 
    background-image:url("bg_beach.jpg"); 
    background-size: 100% 100%; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
}

我試圖添加一個新的div爲背景，但只是搞砸了一切也許會有用jQuery的方法嗎？

來源

2014-04-10 Claudio

jQuery在這裏沒有幫助。你只處理CSS。如果爲你添加一個新的DIV背景圖像會讓你失望，請重試。此時踢出這樣憑證流的：

.mydiv { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background-image:url("bg_beach.jpg"); 
    background-size: 100% 100%; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
} 

#main { 
    position: relative; 
}

top的，bottom，right，left屬性設置爲0充當100％的寬度/高度。位置absolute將DIV排除在其他元素佈局流程之外。

你的HTML看起來像：

<body> 
    <div class="mydiv"></div> 
    <div id="main"> 
     <!-- page content here --> 
    </div> 
</body>

希望它可以幫助

來源

2014-04-10 08:52:55 tmslnz

我這樣做是完全一樣的。一切都在背景下，除了我的標題在頁面加載時淡入淡出。我會給你一個鏈接，但該網站現在只在當地。 – Claudio

看我的編輯。將'position：relative'添加到您的內容所在的'＃main' DIV。 http://jsfiddle.net/CAV8f/ – tmslnz

CSS3 - 動畫背景圖像過濾器

回答

相關問題