2

我有这个 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>

它目前有一个图像背景，但我希望它看起来像它显示在表单前面而不是后面，并且也使图像居中？

这样做的最好方法是什么？

4

2 回答 2

1

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

要使图像不透明，您可以使用 CSS3 和 'filter' 以实现 IE 兼容性：

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

（您可以更改值）

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

于 2013-09-03T11:06:16.110 回答
0

我建议你使用 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');
}
于 2013-09-03T11:27:12.900 回答