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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在响应式菜单项上使用背景图像的正确方法相关的知识,希望对你有一定的参考价值。

html

<ul class="nav">
  <li><a>+7123123123132</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;
}

结果:

Phone icon goes very close to number

如果我切换到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>+7123123123132</a></li>
</ul>
另一答案

尝试使用::之前

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

那是你想要的吗?

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

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

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

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

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

绝对响应式图像背景

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