Question

我试图想出一个解决方案来动画我的网站的后台过滤器我希望它在页面加载时从清晰变为模糊，我知道该怎么做，但由于我的背景在body上，添加过滤器会影响所有内容。

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会有办法吗？

Answer 1

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的{{1}}，bottom，right，left属性充当100％宽度/高度。位置0使DIV远离其他元素布局流程。

您的HTML看起来像：

absolute

希望有所帮助

CSS3 - 动画背景图像过滤器

1 个答案: