Question

我正在创建一个简单的html页面，它将显示网站正在维护中。有一个图像覆盖整个页面，文本应显示在图像的中心。但是文本隐藏在图像下方。我想这是因为我使用jQuery来对齐图像以覆盖整个页面。我感谢任何可能有用的评论或示例代码。

$(window).load(function() {
    var theWindow = $(window);
    var $bg = $("#bg");
    var aspectRatio = $bg.width() / $bg.height();
    
    function resizeBg() {
        if ((theWindow.width() / theWindow.height()) < aspectRatio) {
            $bg.removeClass().addClass('bgheight');
        } else {
            $bg.removeClass().addClass('bgwidth');
        }
    }
    
    theWindow.resize(resizeBg).trigger("resize");
});

html,
body {
    padding: 0;
    margin: 0;
}

#bg {
    position: fixed;
    top: 0;
    left: 0;
}

.bgwidth {
    width: 100%;
}

.bgheight {
    height: 100%;
}

p {
    overflow: inherit;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Page under maintenance</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <p>This website is down.</p>
        <img src="2.jpg" alt="Maintenance View" id="bg">
    </body>
</html>

Answer 1

只需向z-index添加p。

  <p style="position: relative; z-index: 1; font-size: 3em; font-weight: bold;
  color: yellow;">This website is down.</p>

DEMO

Answer 2

p { 
    overflow: inherit;

    /* Add these */
    position: relative;
    z-index: 1;
}

只需给它一个更高的z指数就可以推进它。

文字隐藏在图像下方

2 个答案: