Question

我正在尝试获得带有“标语”的横幅和出现在标题区域内的图像。当我把它写出来时，它出现在标题区域的下面，我无法弄清楚如何在标题区域内获取它。

我也想做出回应。所以我希望“口号”向上移动，并且当图像小于768px时，图像要移到“口号”下方

谢谢

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Cabin', sans-serif;
}


/* Header */

.header-image {
  background-image: url('https://images.unsplash.com/photo-1472376758045-62f519fc676d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8300925c51f6d651fa7cb9c41eaafb45&auto=format&fit=crop&w=2850&q=80');
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  color: white;
  width: 100%;
  height: 49em;
}

.header-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 49em;
}

.logo {
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
  margin-left: .5em;
}

.nav-header {
  grid-column: 2;
  list-style: none;
  display: flex;
  justify-content: space-around;
}


/* Banner */

.slogan,
.banner {
  margin: 0;
}

.banner-image {
  width: 15em;
  height: 15em;
  border-radius: 50%;
}

<!-- HEADER -->

<header class="header-image">
  <div class="header-wrapper">
    <h1 class="logo">STARTUP NAME</h1>
    <nav>
      <ul class="nav-header">
        <li class="navmenu">Services</li>
        <li class="navmenu">Pricing</li>
        <li class="navmenu">Contact</li>
      </ul>
    </nav>
  </div>
</header>


<!-- BANNER -->


<section class="main-banner">
  <div class="banner-container">
    <h1 class="slogan banner">Some Cool Slogan</h1>
    <span class="slogan banner">A cool subtitle explaining said cool Slogan</span>
    <img class="banner-image banner" src="https://images.unsplash.com/photo-1532007271951-c487760934ae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f7ad947fb913065733cd1494ed95ef59&auto=format&fit=crop&w=1100&q=80" alt="">
  </div>
</section>

Answer 1

我调整了代码，以使标题周围有包装纸并将其放在页面的中心。并添加了媒体查询CSS，使其在移动设备中居于另一个

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Cabin', sans-serif;
}


/* Header */

.header-image {
  background-image: url('https://images.unsplash.com/photo-1472376758045-62f519fc676d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8300925c51f6d651fa7cb9c41eaafb45&auto=format&fit=crop&w=2850&q=80');
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  color: white;
  width: 100%;
  height: 49em;
}

.header-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 49em;
}

.logo {
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
  margin-left: .5em;
}

.nav-header {
  grid-column: 2;
  list-style: none;
  display: flex;
  justify-content: space-around;
}


/* Banner */

.slogan,
.banner {
  margin: 0;
}

.banner-image {
  width: 15em;
  height: 15em;
  border-radius: 50%;
}
section.main-banner {
 position:  absolute;
width:100%;
text-align:center;
    top: 50%;
    left:  50%;
    transform: translate(-50%,-50%);
}
.sloganWrapper{
display:inline-block;
vertical-align:  middle;

}

img.banner-image.banner {
    vertical-align:  middle;
}
@media only screen and (max-width:767px){
.sloganWrapper{
display:block;
}
}

<!-- HEADER -->

<header class="header-image">
  <div class="header-wrapper">
    <h1 class="logo">STARTUP NAME</h1>
    <nav>
      <ul class="nav-header">
        <li class="navmenu">Services</li>
        <li class="navmenu">Pricing</li>
        <li class="navmenu">Contact</li>
      </ul>
    </nav>
  </div>
</header>


<!-- BANNER -->


<section class="main-banner">
  <div class="banner-container">
<div class="sloganWrapper">
    <h1 class="slogan banner">Some Cool Slogan</h1>
    <span class="slogan banner">A cool subtitle explaining said cool Slogan</span></div>
    <img class="banner-image banner" src="https://images.unsplash.com/photo-1532007271951-c487760934ae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f7ad947fb913065733cd1494ed95ef59&auto=format&fit=crop&w=1100&q=80" alt="">
  </div>
</section>

Answer 2

我认为是因为您的.main-banner没有包含在标题中。

尝试制作标题position: absolute;，然后将横幅图像移至.main-banner

看看您是否需要...

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Cabin', sans-serif;
}


/* Header */

.header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  color: #fff;
}

.logo {
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
  margin-left: .5em;
}

.nav-header {
  grid-column: 2;
  list-style: none;
  display: flex;
  justify-content: space-around;
}


/* Banner */

.main-banner {
  padding-top: 100px;
  background-image: url('https://images.unsplash.com/photo-1472376758045-62f519fc676d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8300925c51f6d651fa7cb9c41eaafb45&auto=format&fit=crop&w=2850&q=80');
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  color: white;
  width: 100%;
  height: 49em;
  margin-bottom: 20px;
}

.slogan,
.banner {
  margin: 0;
}

.banner-image {
  width: 15em;
  height: 15em;
  border-radius: 50%;
}

<!-- HEADER -->

<header>
  <div class="header-wrapper">
    <h1 class="logo">STARTUP NAME</h1>
    <nav>
      <ul class="nav-header">
        <li class="navmenu">Services</li>
        <li class="navmenu">Pricing</li>
        <li class="navmenu">Contact</li>
      </ul>
    </nav>
  </div>
</header>


<!-- BANNER -->


<section class="main-banner">
  <div class="banner-container">
    <h1 class="slogan banner">Some Cool Slogan</h1>
    <span class="slogan banner">A cool subtitle explaining said cool Slogan</span>
    <img class="banner-image banner" src="https://images.unsplash.com/photo-1532007271951-c487760934ae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f7ad947fb913065733cd1494ed95ef59&auto=format&fit=crop&w=1100&q=80" alt="">
  </div>
</section>

Testing

试图将标题内的横幅

2 个答案: