Question

我无法将一些标语文本修复/锚定到网站标题中。我得到了我想要的位置但是当页面调整大小时，文本不再处于我想要的位置。这可以在html和css中完成，还是必须将文本放到实际图像上？

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #fff;
  color: #555;
  font-family: 'Lato', 'Arial'. 'sans-serif';
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  background-image: url(img/view3.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.header-text-box {
  position: absolute;
  width: 1140px;
  top: 50%;
  left: 30%;
  color: white;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">

<nav>
  <div class="row">
    <a href="index.html">
      <img src="https://static1.squarespace.com/static/524263b4e4b0adb01903b572/t/575edefe86db433ce0efcf9b/1465835270342/" alt="developer logo" class="avatar">
    </a>
    <ul class="main-nav">
      <li><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </div>
</nav>
<div class="header-text-box">
  <h1>The header text i</h1>
  <p>want goes here.</p>
</div>

＆＃13;

这种解决方案会被视为不良做法吗？

header {
  background-image: url(img/test.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  width: 100vw;

}

.header-text-box {
  position: absolute;
  width: 1140px;
  top: 50vh;
  left: 30vw;
  color: white;
}

Answer 1

尝试使用vh和vw进行定位。％有点时髦，特别是身高。

.header-text-box {
    top: 50vh;
    left: 30vw;
}

另外一定要设置

header {
    position: relative;
}

所以.header-text-box将跟随标题标记而不是正文标记

Answer 2

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #fff;
  color: #555;
  font-family: 'Lato', 'Arial'. 'sans-serif';
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  background-image: url(https://static1.squarespace.com/static/524263b4e4b0adb01903b572/t/575edefe86db433ce0efcf9b/1465835270342/);
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex; /* this is the magic css */
  justify-content:center; /* this is the magic css */
  align-items:center; /* this is the magic css */
}

.header-text-box {
  color: white;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">

<nav>
  <div class="row">
    <header>
     <div class="header-text-box">
      <h1>The header text i</h1>
      <p>want goes here.</p>
     </div>
    </header>
    <ul class="main-nav">
      <li><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </div>
</nav>

＆＃13;

不确定这是不是你想要的。但我假设您希望标题文本在标题图像中居中。我试图避免绝对的位置，因为它往往是凌乱的。

对于这种类型的东西，我喜欢使用flex

这是掌握flex的有趣方式：http://flexboxfroggy.com/

Answer 3

flexbox w背景图片和vmin

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #fff;
  color: white;
}

header {
  background-image: url(https://static1.squarespace.com/static/524263b4e4b0adb01903b572/t/575edefe86db433ce0efcf9b/1465835270342);
  height: 100vh;
  background-size: cover;
  background-position: center;
  
            display: flex;
            flex-flow: column nowrap;  
            justify-content: center;
            align-content: center;
            align-items: center;  
}

header > h1 {
font-size: 12vmin;
            flex: 0 1 auto;
            align-self: auto;

}
header > p {
font-size: 6vmin;
            flex: 0 1 auto;
            align-self: auto;
}

<header>
  <h1>The header text</h1>
  <p>subtext this is subtext</p>
</header>

如何将网站标题文本修复为标题图像

3 个答案: