Question

我是html / css的新手，我不明白为什么我的背景图片没有显示在右侧搜索框中的按钮上。我想在搜索框中的右键上显示放大镜图像？

.sbox {
  width: 297.297px;
  height: 25px;
  background-color: rgba (0, 0, 0, 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight: normal;
  cursor: auto;
  position: relative;
  
}

.fb {
  background: url("../img/mag.png") no-repeat 0 0;
  background-size: 50px 50px;
  }

<!DOCTYPE html>
<html lang="en">

  <head>
    <link rel="stylesheet" href="css/facebook.css">
  </head>

  <body>
    <button value="1" class="tools" aria-label="Search" type="submit">
  <i class=fb></i>
</button>
    <input type="text" class="sbox" placeholder="Search " arial-label="Search" />
  </body>

</html>

Answer 1

基于这个问题，我觉得你想在右边的搜索框中显示一个图像。如果是这样，请将背景图像应用于课程'sbox'，图像位置应为'正确0'。课程'sbox'将如下所示：

.sbox {
  width: 297.297px;
  height: 25px;
  background-color: rgba (0, 0, 0, 0);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-weight:`enter code here` normal;
  cursor: auto;
  position: relative;
  top: -26px;
  background: url("../img/mag.png") no-repeat right 0;
}

如果您想将图像（放大镜）放在右侧的按钮上，则代码如下：

.fb {
background: url("../img/mag.png") no-repeat right 0;
width:15px;
height:14px;
display:inline-block;
float:right;
  }

Answer 2

您应该将背景图像添加到按钮而不是使用i标记。我的标签在html中用于替代文本情绪。例如添加斜体等。

它们被font-awesome和bootstrap用来显示图标的原因主要是因为默认情况下它们是内联块并且效率很高。但他们这样做的方法是添加一个字体文件，而不是使用它的背景属性

在这里，您应该为按钮添加背景，并指定特定的高度和宽度。

<button value="1" class="tools fa" aria-label="Search" type="submit">
</button>

.fb {
  background: url("../img/mag.png") no-repeat 0 0;
  background-size: 50px 50px;
 height:45px;
    width:50px;
  }

Answer 3

您的<i class=fb></i>没有文字内容。除非您在CSS中指定一些高度和宽度，否则您的按钮将不受影响。尝试将其添加到.fb

.fb{
    height:50px; /*Assuming 50px because your background-size is 50px*/
    width:50px;
    display:block; /*Because height won't take effect on 'inline' elements*/
}

让我知道它是怎么回事。

使用背景图像属性的背景图像不显示，因此无法获得所需的显示

3 个答案: