为表格添加背景图片和边框图片答案

【问题标题】：Add background image and border image to form为表格添加背景图片和边框图片
【发布时间】：2011-05-16 20:34:55
【问题描述】：

我有一个基于 jquery 的简单表单 -

<center>
    <form id="form1">
    <div id="registerDiv" data-role="fieldcontain" >    
     <input type="button" value="Register" id="registerButton" data-inline="true"/>
    </div>
    </form>
  </center>

我想修改表单，使其具有两个背景图像，一个背景覆盖按钮（附件中的数字 1 - layout.png），第二个是充当边框的背景图像（附件中的数字 2 -布局.png）。实现这一目标的最佳方法是什么？

谢谢

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

我想你要找的只是这个：

#form1 { 
    background: url( /images/background1.jpg ) no-repeat;
}

#registerDiv {
    margin: 40px;
    background: url( /images/background2.jpg ) no-repeat;
}

【讨论】：

谢谢，只需要稍微调整一下，如何分别修改左、上、右和下边距的大小？
我有点懒惰地问这个问题 ;) - margin-bottom: 5%;最高保证金：10%；左边距：10%；右边距：10%；

【解决方案2】：

CSS：

<style type="text/css">
  .outer {background:url(layout-outer.png);padding:12px}
  .inner {background:url(layout-inner.png);padding:12px}
</style>

HTML：

<div class="outer">
  <form id="form1">
    <div class="inner">
      <!-- other input items as necessary -->
      <input type="button" value="register" id="registerButton" data-inline="true" />
    </div>
  </form>
</div>

这里的关键部分是 '.outer' 中的填充量。这基本上就是你的边框宽度。

【讨论】：