Блог

Главная - Вопросы по программированию - Добавить фоновое изображение и изображение границы в форму

Добавить фоновое изображение и изображение границы в форму

#jquery #html #css #jquery-mobile

#jquery #HTML #css #jquery-мобильный

Вопрос:

У меня есть простая форма, основанная на 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). Каков наилучший метод достижения этого?

Спасибовведите описание изображения здесь

Ответ №1:

Я думаю, все, что вы ищете, это:

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

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

Комментарии:

1. Спасибо, просто нужна небольшая настройка, как я могу изменить размер левого, верхнего, правого и нижнего полей по отдельности?

2. как-то лениво с моей стороны спрашивать об этом 😉 — нижнее поле: 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’. Это в основном ваша ширина границы.