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>