Question

我正在尝试使用bootstrap和dreamweaver构建一个响应式网站。我想在我的导航栏中放置一个图像，并在图像上放置一个文本链接。我在将文字放在图像上时遇到了一些麻烦。

非常感谢任何帮助。

以下是源代码：

    </head>
  <body>

  <nav class="navbar navbar-fixed-top">
  <div class="container-fluid">
  <a class="navbar-brand" href="index.html">
    <img src="files /button images/swirl 1 11.svg" alt="" width="130"  class="d-inline-block align-top">
    Tom
  </a>
</nav>

这是我自己的css表，我链接到覆盖bootstarps：

   body{
    background-color:#F00;

}
nav a{
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    background-color: transparent;
    font-style: normal;
}

Answer 1

在这种情况下，您需要添加一些自定义css，如下所示：

.navbar-brand {
    background: url("https://placeimg.com/130/40/animals") no-repeat center;
    background-size: cover;
    min-width: 130px;
}

用你的SVG替换它，你应该好好去。

为navbar-brand类的元素创建背景图像。

将文本放在navbar bootstrap 4 Dreamweaver中的图像上

1 个答案: