在导航栏中使用带有文本的图像

Question

我刚开始使用 HTML 和 CSS。我需要帮助。

我想在 header 中使用图像和文本（作为标题）。所以我使用了导航栏。

如果我将 window 变小，我希望文本随图像一起移动，但它根本不移动。我认为这是因为代码中的 left: 480px; 但如果我不使用 left: 480px;，它不会出现在图像上。

有什么方法可以让window变小的时候它可以随着图像移动吗？

WINDOW 的全尺寸

我把 WINDOW 尺码改小后的样子

正文在中间 left:480px;。我希望文本保持在左侧。我需要更改或添加代码的哪一部分？

.navbar {
  display: block;
  align-items: flex-start;
  padding: 0;
}

.navbar img {
  width: 100%;
  height: 100px;
  display: block;
  position: relative;
}

.navbar span {
  position: absolute;
  z-index: 1;
  color: #fff;
  width: 200px;
  height: 28px;
  font-family: NanumGothic;
  font-size: 24px;
  text-align: left;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 12.8px;
  letter-spacing: normal;
  top: 50px;
  left: 480px;
}

<!DOCTYPE html>
<html>

<head>
  <title> Change Member Info</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="format-detection" content="telephone=no">
</head>

<body>
  <form id="frm" name="frm">
    <div class="header">
    </div>
    <div class="container">
      <nav class="navbar">
        <div class="navbar__logo">
          <img src="/assets/images/notext_title_04@3x.png">
          <span>My Website</span>
        </div>
      </nav>
    </div>
  </form>
</body>

</html>

Answer 1

您可以尝试两种方法来使其响应

1.以百分比给出 margin-left

.navbar span{
            left: 30%
            }

根据屏幕尺寸，这需要左间距百分比。所以它自动采用

2。使用媒体查询

通过使用这个你可以设置 CSS 专门针对不同的屏幕尺寸

/* Set CSS for Full screen size */
.navbar span{
                left: 480px
                }


/* On screens that are 992px or less */
@media screen and (max-width: 992px) {
  .navbar span{
                left: 380px
                }
}

/* On screens that are 600px or less */
@media screen and (max-width: 600px) {
 .navbar span{
                left: 300px
                }
}

在导航栏中使用带有文本的图像

Using image with text in navbar

html

css

jsp

web

frontend