Question

我试图将PSD转换为HTML，但解决此问题时遇到了一些问题。看看下面的图片：

正如我用红色箭头所提到的，模板标题中有一个蓝色背景图像！即使浏览器大小发生变化，如何为背景添加一个敏感且稳定的位置？背景应始终包含屏幕的70％（在徽标和第一个导航项目之间结束）。

这是我工作的重点：https://jsfiddle.net/4dpgbLt9/2/

html,
body {
  height: 100%;
}

body {
  font-family: IranSans, sans-serif;
}

.header {
  height: 100vh;
  width: 100vh;
  background: url("https://i.imgur.com/aN7jCZE.png") left no-repeat;
  background-size: contain;
}

.navbar {
  direction: rtl;
  padding-top: 16px;
}

.nav-item .nav-link {
  font-size: 16px;
  padding: 0 20px 0 20px !important;
}

.nav-item.active .nav-link {
  color: #ffd738 !important;
}

.nav-item .nav-link {
  color: #ffffff !important;
}

.nav-account-parent {
  position: relative;
}

.nav-account {
  position: absolute;
  width: 100%;
  height: 100px;
  top: -50px;
  z-index: -1;
  background-color: #025c64;
  border-radius: 16px;
}

.navbar-brand img {
  width: 220px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-transparent justify-content-center">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="https://i.imgur.com/gURHBju.png" alt="Logo">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">صفحه اصلی</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">درباره ما</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">درخواست مشاوره</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">خدمات</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">فروشگاه</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">ارتباط با ما</a>
          </li>
          <li class="nav-item nav-account-parent">
            <div class="nav-account"></div>
            <a class="nav-link" href="#">ورود / عضویت</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="header">

  </div>

感谢您的时间♥

Answer 1

这是我的解决方案：

将.header width 从 100vw 更改为 100%
将background-size 从 contain 更改为 70% 在 .header
添加 top background:使其锚定在左上方

CSS：

.header {
    height: 100vh;
    width: 100%;
    background: url("https://i.imgur.com/aN7jCZE.png") top left no-repeat;
    background-size: contain;
    background-size: 70%;
}

codepen：https://codepen.io/CodeBoyCode/pen/VEEoQW

标头中的响应式稳定背景图片

1 个答案: