我有一个HTML表,其中第一行有一个背景图像和一些内容。该表的第二行应从第一行的下面开始,但它出现在第一行的顶部。
尝试了显示,换行和换行等其他属性
<html>
<head id="Head1" runat="server">
<style type="text/css">
.bg-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
background-image: url(./Images/Home.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
float: left;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 95%;
height: 40%;
padding: 20px;
text-align: center;
}
</style>
</head>
<body style="background-color: White; max-width: 100%; overflow-y:
auto;">
<form id="form1" runat="server">
<table>
<tr>
<td>
<div class="bg-image">
</div>
<div class="bg-text">
Welcome to CoachX
</div>
</td>
</tr>
<tr>
<h1 style="font-variant: normal; font-family: Times New
Roman; font-size: 5em; color: Black;">
This is not visible</h1>
</tr>
</table>
</form>
</body>
</html>
表格的第二行(不可见)应该出现在第一行的下方,但它出现在第一行的上方
答案 0 :(得分:-1)
我建议使用Bootstrap(https://getbootstrap.com/docs/4.0/layout/grid/) 就您而言:
<div class="container">
<div class="row">
<div class="col-sm">
<form>
<h1>This is not visible</h1>
</form>
</div>
</div>
<div class="row">
<div class="col-sm">
Table down
</div>
</div>
</div>