添加背景图像和边框图像到表单

Question

我有一个基于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 - layout.png）。实现这一目标的最佳方法是什么？

感谢

Answer 1

我认为你所要找的就是：

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

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

Answer 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'中的填充量。这基本上就是你的边框宽度。