主页 / 问题 / 1100555
Accepted
Максим Филимонов
Asked:2020-03-27 18:27:01 +0000 UTC2020-03-27 18:27:01 +0000 UTC

<Input> 移动图片

  • 772

使用时与<input>图片一起移动margin。怎么才能动<input>？

#fullnameinput {
  height: 46px;
  width: 281px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 2px 2px 2px 2px;
  font-size: 13px;
  background-image: url(48.png);
  background-repeat: no-repeat;
  background-position: 4px;
  outline: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding-left: 20px;
  margin-top: 289px;
  margin-left: 306px;
  border: none;
  position: relative;
}
<header>
  <div id="logo1"><img src="888.png"></div>
  <nav>
    <div id="menu">
      <a class="menu__item" href="">HOME</a>
      <a class="menu__item" href="">SERVICE</a>
      <a class="menu__item" href="">ABOUT US</a>
      <a class="menu__item" href="">PRICING TABLE</a>
      <a class="menu__item" href="">HOW IT WORK</a>
      <a class="menu__item" href="">HAPPY CLIENTS</a>
      <a class="menu__item" href="">CONTACT US</a>
    </div>
  </nav>
</header>
<div id="banner12345">
  <p id="mainheader"><strong>BOOST UP YOUR LOCAL BUSINESS</strong></p>
  <p id="maintext">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum typesetting.</p>
  <input placeholder="    Full Name" id="fullnameinput" type="text" name="Full Name">

  <img id="bannerpng" width="100%" src="20.png">

</div>

html

1 个回答

  1. Best Answer

    您需要一张图片并将input其放在单独的块中并将其设置为position: relative;, 和用于输入position: absolute;

    .input__img {
  position: relative;
}

#fullnameinput {
  position: absolute;
  top: 289px;
  left: 306px;
  height: 46px;
  width: 281px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 2px 2px 2px 2px;
  font-size: 13px;
  background-color: red;
  background-image: url(48.png);
  background-repeat: no-repeat;
  background-position: 4px;
  outline: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding-left: 20px;
  border: none;
}
    <header>
  <div id="logo1"><img src="888.png"></div>
  <nav>
    <div id="menu">
      <a class="menu__item" href="">HOME</a>
      <a class="menu__item" href="">SERVICE</a>
      <a class="menu__item" href="">ABOUT US</a>
      <a class="menu__item" href="">PRICING TABLE</a>
      <a class="menu__item" href="">HOW IT WORK</a>
      <a class="menu__item" href="">HAPPY CLIENTS</a>
      <a class="menu__item" href="">CONTACT US</a>
    </div>
  </nav>
</header>
<div id="banner12345">
  <p id="mainheader"><strong>BOOST UP YOUR LOCAL BUSINESS</strong></p>
  <p id="maintext">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum typesetting.</p>

  <div class="input__img">
    <input placeholder="Full Name" id="fullnameinput" type="text" name="Full Name">
    <img id="bannerpng" width="100%" src="https://1poposobiyam.ru/wp-content/uploads/2016/01/family-2_ml-1-1.jpg">
  </div>

</div>

    • 2

相关问题