css - 背景 CSS 图像

Question

我有一个相当复杂的网页，并且希望在背景中有一个可以通过所有 div 层看到的图像。请查看http://va.in-design.com获取代码。无论我尝试什么，我只能显示一些菜单。某些设置使其在访问页面上的菜单时显示（悬停在上方）。有人可以给我一个关于做到这一点的最佳方法的指针。此外，是否有任何可用的东西可以让该图像在加载时为 100%，然后淡入到 15%？

Answer 1

有 CSS 不透明度和 CSS 过渡，但为此我将使用 jquery。

1. 调整您的 html{} 选择器以显示这样的背景

   html {
   height: 100%;
   margin: 0;
   width: 100%;
   background-image: url(/images/logos/v-alexander-logo1-04-transpart-web.gif)
   no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   }
   

2. 我不确定你的意思是菜单没有显示我肯定在背景图像上看到了菜单。如果您仍然遇到此问题，我建议您使用 z-index 作为菜单 ul#sdt_menu 的 css 规则之一，或者将其包装在 div id 中并调整父 div 的 z-index。

3. 做不透明度淡化的 jquery 将是这个http://jsfiddle.net/naeluh/XYB3u/

将此 div 添加到您想要背景的所有页面。

    <div id="background"></div>

将此 css 规则添加到您的 style.css 文件并删除您的 html{}

    #background{
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    background-image: url(http://va.in-design.com/images/logos/v-alexander-logo1-04-transpart-web.gif); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:-1;
    }

将此添加到您希望它淡出的页面的头部

   <script type='text/javascript'>
      $(window).load(function(){
      $('#background').fadeOut(9000);
       }); 
    </script>