Question

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

.search .form-item input {
    background-image: url("https://i.stack.imgur.com/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("https://i.stack.imgur.com/VtucQ.jpg");
 }

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

和html

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

背景尺寸为30x17，因为图像不会丢失比率。然后只需聚焦动画位置即可隐藏它。

Answer 2

当有人输入文本框时，您可以在.focus中使用隐藏简单的图像。设置图片不显示

如何确定背景图片的位置？

2 个答案: