css - 如何固定背景图片的位置？

Question

我有一个用作搜索栏的输入文本字段，我想在左侧放置一个放大镜，但是当输入文本字段获得焦点时，放大镜应该会消失。

.search .form-item input {
    background-image: url("/image/VtucQ.jpg");
    background-size: 70% 70%;
    background-position: -105% center;
    background-repeat: no-repeat;
  }
.search .form-item input:focus {
    background-image: none; }

<form action="/search" method="get" id="views-exposed-form-search-page-page-search" accept-charset="UTF-8">
  <div class="form--inline clearfix">
  <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-keys form-item-keys">
      <label for="edit-keys">Fulltext search</label>
        <input data-drupal-selector="edit-keys" type="text" id="edit-keys" name="keys" value="" size="30" maxlength="128" class="form-text">

        </div>

</div>

</form>

<div class="search">
    <input>
</div>

我想用css来实现:

  .navigation .search  input {
    background-image: url("../images/search.svg");
    background-size: 70% 70%;
    background-position: -105% center;
    background-repeat: no-repeat;
  }
  .navigation .search  input:focus {
    background-image: none; }

代码基本上可以工作。问题是我需要让 background-image 变小一点，这是我通过 background-size: 70% 70% 实现的，但它与图像 - 它出现在中心。然后我不得不使用 background-position:-105% center 属性，将图标向左移动。

我的问题是，使用负百分比来指定 background-image 的位置是否是一种好的做法，还是有更好的方法？

Answer 1

你可以在 CSS 中做这样的事情:

.search  input {
   background-size: 30px 17px;
   background-repeat: no-repeat;
   background-position: left;
   transition: .3s;
   background-image: url("/image/VtucQ.jpg");
 }

.search input:focus {
     background-position: left 50px; 
  }

和html

<div class="search">
    <input>
</div>

背景尺寸为 30x17，因为图像不会丢失比例。在焦点上只是动画位置从图像隐藏它。