我正在创建一个简单的 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>最佳答案
只需将 z-index 添加到 p。
<p style="position: relative; z-index: 1; font-size: 3em; font-weight: bold;
color: yellow;">This website is down.</p>
关于jquery - 文本隐藏在图像下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34147399/