【问题标题】:CSS - website overlay when page is loaded [closed]CSS - 加载页面时的网站覆盖[关闭]
【发布时间】:2013-09-04 12:58:18
【问题描述】:

我正在设置一个与传统导航结构不同的网站,我想在用户第一次进入网站时加载的网站顶部添加一个覆盖。

覆盖应该是全屏的,黑色的“opacity=50”,我将添加关于如何使用网站的简单文字。点击时它也应该消失

我是一名网页设计师,但我的编码知识有限。 (一些css/html/php)

有没有一种简单的方法可以为此添加一个类?

感谢反馈

【问题讨论】:

  • 是的,好主意,但你试过了吗?
  • 向我们展示您已经尝试过的内容。
  • 是的,有一个简单的方法。感谢您的提问;)
  • 小心他可能有 Mjölnir
  • 我喜欢这个网站功能。我要再来一个!

标签: php css html


【解决方案1】:

足够简单 HTML

<div id='overlay'>
  <div id='contents'>...
</div>

CSS:

#overlay {
  background-image : url('images/overlay.png');
  width:100%;
  height:100%;
  position: fixed;
  top: 0;
  left: 0;
}

#contents {
  width: 300px;
  height: 300px;
  margin: auto;
}

我使用叠加层中的图像,因为任何不透明度设置都会传递到内容区域,并且不需要或永远不需要将 javascript 用于此类内容。

【讨论】:

    【解决方案2】:

    按照这个例子进行

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <style>
    #displaybox {
        z-index: 10000;
        filter: alpha(opacity=50); /*older IE*/
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
        -moz-opacity: .50; /*older Mozilla*/
        -khtml-opacity: 0.5;   /*older Safari*/
        opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
        background-color:#000000;
        position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
    }
    </style>
    <script>
    function clicker(){
        var thediv=document.getElementById('displaybox');
        if(thediv.style.display == "none"){
            thediv.style.display = "";
            thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
        }else{
            thediv.style.display = "none";
            thediv.innerHTML = '';
        }
        return false;
    }
    </script>
    </head>
    <body>
    <div id="displaybox" style="display: none;"></div>
    <a href='#' onclick='return clicker();'>Open Window</a>
    </body>
    

    在本站http://library.creativecow.net/articles/chaffin_abraham/full-page-overlay.php

    【讨论】:

      【解决方案3】:

      谷歌!这并不难。 非常快速的谷歌搜索给我带来了here

      $(function() {
          var docHeight = $(document).height();
          $("body").append("<div id='overlay'></div>");
          $("#overlay").height(docHeight).css({
              'opacity' : 0.4,
              'position' : 'absolute',
              'top' : 0,
              'left' : 0,
              'background-color' : 'black',
              'width' : '100%',
              'z-index' : 5000
          });
      });
      

      要通过单击任意位置来关闭叠加层,您可以执行以下操作:

      $('#overlay').click(function (e) {
          this.remove();
      });
      

      这里有一个jsFiddle 来演示。

      【讨论】:

      • 如果javascript没有启用怎么办?
      • 这只是在屏幕上放置一个叠加层,但不允许在页面上显示 OP 想要的信息文本。
      • 将文本添加到覆盖 div。我试图为他们指明正确的方向,而不是为他们这样做。
      • 您好.. 感谢您的反馈并推动我朝着正确的方向前进:).. 这是在 html 中还是在 css 中?
      • 只需将其添加到页面的 JavaScript 部分即可。
      猜你喜欢
      • 2011-06-04
      • 2013-09-28
      • 1970-01-01
      • 1970-01-01
      • 2016-09-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多