【问题标题】:Background CSS Image背景 CSS 图像
【发布时间】:2013-10-01 19:36:07
【问题描述】:

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

【问题讨论】:

    标签: css background-image transparency opacity fadeout


    【解决方案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>
    

    【讨论】:

    • 非常感谢。那工作得很好。但是,在此过程中,我似乎弄乱了文本 div 中的滚动条。不知道那里发生了什么。此外,标志的最底部被某些东西遮住了。我猜是页脚。无论如何,谢谢你的帮助。干杯,驯兽师
    • 我建议使用一个框架来帮助你的过程,比如 HTML5 Boilerplate Twitter Bootstrap Zurb Foundation Skeleton HTML KickStart 它可能会让事情变得更容易祝你好运
    • 你会推荐哪一个。我现在的问题是我正在使用 linux 机器和 windows 8 机器进行开发。两个平台上都可用的任何一个。有网站或实际程序吗?现在调查它。再次感谢您的信息。
    • 我刚刚下载了样板 html 模板。看起来真的很酷。我会玩这些。我不认为这样的事情存在。