Question

我有这个HTML表格（在表格中）

<style type="text/css">
form {
    text-align:center;
    background:url(padlock_closed.png) no-repeat;
}
</style>

<form>
<table width="600" border="0" align="center" cellpadding="5" cellspacing="5">
  <tr>
    <td width="199"><strong>Forename</strong></td>
    <td width="366"><input type="text" name="forename" size="50" /></td>
  </tr>
  <tr>
    <td><strong>Surname</strong></td>
    <td><input type="text" name="surname" size="50" /></td>
  </tr>
  <tr>
    <td><strong>Email</strong></td>
    <td><input type="text" name="email" size="50" /></td>
  </tr>
</table>
</form>

它目前有一个图像背景，但我希望它看起来像在窗体前面而不是在后面显示，并使图像中心呢？

这是最好的方法吗？

Answer 1

取决于您的方法，您是否希望首先点击按钮以便图像显示或已经存在？

要使图像不透明，可以使用CSS3和'filter'来兼容IE：

#id-of-image {
 opacity: 0.8;
 filter: alpha(opacity=80); //IE support
}

（您可以更改值）

要将图像放在表单上方，请使用css定位（相对，绝对，相对）

Answer 2

我建议你使用jquery弹出。

添加div

<div id="dialog-modal-loading" style="display:none;">
   <img src="images/your_image.gif">
</div>

调用javascript函数弹出。根据您的意愿改变高度和宽度。

function call_dialog(){   
     $( "#dialog-modal-loading" ).dialog({
       height: 180,
       width: 180,
       modal: true,      
       closeOnEscape: false,
       resizable: false,
       position: 'center',
       beforeclose: function (event, ui) { return false; },
       dialogClass: "noclose"
     });
     $('.ui-dialog').css('opacity','0.2');
}

在html表单上显示图像

2 个答案: