文章/答案/技术大牛

发布

社区首页 >问答首页 >页面介绍-正文淡入

问页面介绍-正文淡入
EN

Stack Overflow用户

提问于 2014-12-23 21:04:54

回答 2查看 257关注 0票数 1

我有一个wordpress站点，我正在使用supersized插件来全屏显示背景图像滑块。

我想要显示静态全屏背景图像之前，主体是所有的网站内容加载。

现在，我添加了这个HTML：

<html class="no-js">

(我在html标记中添加了类no-js )

在css中，我添加了下面这一行：

.js body { display: none; }

在页脚，我添加了这段jQuery代码：

<script>
  jQuery('body').fadeIn(5000); // fadein time in ms
</script>

从这里开始，我不知道如何继续。

我试着用jquery显示背景，但是...如果我隐藏了body -我实际上不能做任何事情，直到它被jQuery加载，对吗？还有其他选择吗？

jquery

css

html

wordpress

回答 2

Stack Overflow用户

发布于 2014-12-23 22:52:57

将HTML从以下位置更改：

<body>
    *your content*
<body>

要这样做：

<body>
    <div id="bgimage"></div>
    <div id="content">*your content*</div>
<body>

将此css添加到#bgimage

#bgimage { position: absolute; width: 100%; height: 100%; background-image: url(*image url*); background-size: cover; }

在淡出#bgimage时，淡入#content，而不是淡入正文

我认为这就是@trainoasis在他们的评论中的意思。

票数 0

Stack Overflow用户

发布于 2014-12-24 00:35:37

您可以尝试如下所示：

    $(function() {
      window.setTimeout(function() {
        $('body').removeClass('preload'); //remove class preload to hide the image
      }, 5000);
    });

    body,
    html {
      height: 100%;
      width: 100%;
      position: relative;
    }
    body.preload:after {
      content: " ";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(/* Your image */) no-repeat center center/100% 100% #000;
      z-index: 999;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="preload">
  <h3>content of body...</h3>
</body>

添加和删除类预加载可以做到这一点，因为css伪元素是基于该类的。

希望这能有所帮助

我创建了一个fiddle来展示上面的代码

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27620996

复制

相似问题

问页面介绍-正文淡入
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面介绍-正文淡入EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页面介绍-正文淡入
EN