在响应式菜单项上使用背景图像的正确方法

Posted 2021-04-23

html：

<ul class="nav">
  <li><a>[phone]</a></li>
</ul>

CSS：

.nav .li {
  background: url(../images/phone.svg) no-repeat left center;
  background-position: left 5.9375rem center;
  background-size: 16px 16px;
}

结果：

如果我切换到XS - 手机图标与电话号码重叠，但如果我选择更大的分辨率，那就没关系。

也许我没有使用正确的方法来添加菜单图标？

答案

检查一下。您可以使用伪类

.phone {
  position: relative;
  padding-left: 20px;
}

.phone:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background: url(https://use.fontawesome.com/releases/v5.0.13/svgs/solid/phone.svg);
  background-size: 16px 16px;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

<ul class="nav">
  <li class='phone'><a>[phone]</a></li>
</ul>

另一答案

尝试使用::之前

.nav a::before {
    content: '';
    background: url ( '../images/phone.svg');
    width: 16px;
    height: 16px;
    display: inline-flex;
}

那是你想要的吗？

以上是关于在响应式菜单项上使用背景图像的正确方法的主要内容，如果未能解决你的问题，请参考以下文章

如何让这个表单和按钮在响应式设计中正确调整大小？

如何在更改屏幕宽度的同时保持响应式背景图像高度？

VSCode自定义代码片段—— 数组的响应式方法

VSCode自定义代码片段10—— 数组的响应式方法

绝对响应式图像背景

Bootstrap 4 带有图像背景的垂直图像菜单