javascript - 网页中的文本字段和文本框显示在网页图像下方。图片应作为背景图片

标签 javascript html css image jsp

我正在开发一个网络应用程序。我使用 JSP 设计了我的网页。 我正在使用背景图像。我有一些文本字段和文本框来接受用户输入。但是,当我运行我的代码时,图像正在显示,但所有文本字段和文本框都出现在图像结束的下方。然而,根据我的要求,图像应该是背景图像,并且所有内容都应该显示在图像本身之上。请帮忙。

下面是我的 JSP 代码:

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Employee Registration</title>
    <script type="text/javascript">

        function display_ct() {
            var strcount
            var x = new Date()
            var x1 = x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
            document.getElementById("time_div").innerHTML = x1;
            tt = display_c();
        }

        function display_c() {
            var refresh = 1000; // Refresh rate in milli seconds
            mytime = setTimeout('display_ct()', refresh)
        }

    </script>
    </head>
    <body onload=display_ct();>

        <h1>Employee Registration Form</h1>

        <div class="Bitmap">
             <img src="Images/online-employee-registration-portal.jpg" style="height: 800px; width: 1355px;" />
        </div>

        <table width="1300" class="myTable">
            <tr class="Labels"><td align="left" width="200"><span id="time_div" class="clock2"></span></td></tr>    
        </table>

        <center>
            <form action="EmployeeRegistration.jsp" method="post">
            <table cellpadding="3pt">
                <tr><td width="20%">Name:<input type="text" name="name"/></tr>
                <tr><td width="20%">Employee ID:<input type="text" name="employeeID"/></tr>
                <tr><td width="20%">Email ID:<input type="text" name="emailID"/></tr>
                <tr><td width="20%">Phone:<input type="text" name="phone" size="30" /></tr>
                <tr><td width="20%">City:<td><input type="text" name="city" size="30" /></tr>
            </table>

            <p />

            <input type="submit" value="Register" />

            </form>
        </center>


    </body>
    </html>

最佳答案

您的背景图像是 position: static。 您应该将其更改为 position: absolute;并给出 z-index: -1;像这样;

<img src="Images/online-employee-registration-portal.jpg" style="height: 800px; width: 1355px; position: absolute; z-index: -1;">

关于javascript - 网页中的文本字段和文本框显示在网页图像下方。图片应作为背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42018687/

相关文章:

javascript - 移动应用程序和 PC 浏览器之间的点对点通信

javascript - 将 css3 转换添加到当前 css3 转换值

html - 围绕大型嵌套元素拉伸(stretch)容器 div

html - 如何使联系表格 float 到文本的左侧?

javascript - 我如何在此 select2 表单上添加额外字段

javascript - FancyBox 加载 HTML 页面

javascript - 如何在代码中触发 jQuery 更改事件

php - 是否可以使用 PHP 或 JavaScript 从用户处获取剪贴板数据?

html - 表格单元格在行内的高度不同

html - 即使您调整浏览器大小时,两个 div 也会彼此相邻 float