Question

我制作了第二张背景图片，但无论我改变什么元素，它似乎都无法定位。最重要的是，当我进入Chrome并使用检查然后删除它不会消失的图层？

我遇到的另一个问题是试图弄清楚我需要更改哪些代码才能让所有内容都集中在页面布局中。就像我只是错误的数字或什么？如果有人能帮助我，我会非常感激。

我的代码：

＆＃13;

/*The Main Background*/

body {
  background-image: url(../img/background.png);
  background-repeat: repeat-x
}

#HeaderBike {
  background-image: url(..img/HeaderBike.png);
  background-repeat: no-repeat;
  z-index: 1;
  float: left;
  position: absolute height: 155px;
  width: 155px;
}

.container {
  width: 960px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
  line-height: 1.5;
  text-align: center;
}


/* Nav Element */


/*The Search Bar */

form div {
  /*Margin Header */
  48px;
  float: left;
}

.site-navigation {
  height: 155px;
}

.site-navigation img {
  margin-top: 16px;
  float: left;
}

.site-navigation ul {
  width: 600px;
  margin: 0 auto;
}

.site-navigation li {
  margin: 35px 33px;
  float: left;
}

.site-navigation a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.site-navigation a:hover {
  padding-bottom: 2px;
  border-bottom: 1px solid white;
}


/* Header Element */

h2 {
  line-height: 0.8;
  font-size: 72px;
  font-weight: bold;
  color: #fff;
  width: 450px;
  margin: left;
  margin-top: 115px;
  padding-bottom: 42px;
  float: left;
  text-align: left;
}

h1 {
  text-align: left;
}

.SearchGlass {
  margin: -142px 900px;
  float: left;
}


/* Class For Articles*/

.article {
  float: left;
  width: 100%;
  margin-bottom: 72px
}

.article img {
  width: 20%;
  margin-right: 1%
}

.article h1 {
  float: left;
  width: 70%;
  margin: 5px 0;
  text-align: left;
  font-weight: bold;
  font-size: 22.5px;
}

.article p {
  float: left;
  width: 70%;
  margin: 5px 0;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}

footer {
  display: block;
  width: 100%;
  float: left;
}

.search {
  margin: -141px 1125px;
  float: left;
}

.RoadToYellow {}

＆＃13;

<div class="container">
  <header class="Team Sky">
    <nav class="site-navigation">
      <img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
      <ul class="clearfix">
        <li><a href="#">shop</a></li>
        <li><a href="#">checkout</a></li>
        <li><a href="#">video</a></li>
        <li>
</div>
</ul>
<div class="SearchGlass" id="SearchGlass">
  <img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>

<form>
  <div class="search">

    <input id="search" type="text" name="search" placeholder="search"><br>


  </div>

  <div id="HeaderBike">
    <img src="img/HeaderBike.png" alt="Dude on a bike">
  </div>

  </nav>
</form>





<div class="TeamSkylogo">
  <h2>Team Sky</h2>
</div>

<div class="RoadToYellow">
  <P>the road to yellow</P>
</div>
<!--Shop Team Sky!-->


<main>


  <h1> TEAM NEWS </h1>
  <!-- each article/blog should be in it's own container -->
  <div class="article">
    <img src="img/ArticleImageOne.png" alt="Water">
    <h1>Giro d'Italia</h1>
    <P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>

    <!--readon !-->
  </div>

  <div class="article">
    <img src="img/ArticleImageTwo.png" alt="Bikes by River">
    <h1>Krudder Gets a Break</h1>
    <P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
    <!--readon !-->
  </div>

  <div class="article">
    <img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
    <h1>Kinnick's New Contract</h1>
    <P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
    <!--readon !-->
  </div>

  <div class="article">
    <img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
    <h1>Froom In Third</h1>
    <P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
    <!--readon !-->
  </div>
</main>


<footer>
  <img src="img/sponsor1.png" alt="Team Sky Sponsor">
  <img src="img/sponsor2.png" alt="Pinarello">
  <img src="img/sponsor3.png" alt="Shimano">
  <img src="img/sponsor4.png" alt="Rayha">
  <img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>

</div>

＆＃13;

What its suppose to look like 比。 What Mine Looks Like

Answer 1

尝试使用：background-size: cover; 这样做会放大图像，使其覆盖容器。

此外，如果您想使图像居中，可以使用：background-position: center;

最后它看起来像这样：

#HeaderBike {
  background-image: url(..img/HeaderBike.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
  float: left;
  position: absolute height: 155px;
  width: 155px;
}

或更简化：

#HeaderBike {
  background: url(..img/HeaderBike.png) no-repeat cover center;
  z-index: 1;
  float: left;
  position: absolute height: 155px;
  width: 155px;
}

Answer 2

不同的方法（使用flexbox）

结构HTML

<!-- Header with logo, links and search -->
<header></header>
<!-- Intro section -->
<section></section>
<!-- Main with images and articles -->
<main></main>
<!-- Footer with customers and navigation -->
<footer></footer>

在部分，列和行中进行思考。

<div class="section>
  <div class="row">
    <div class="column"></div>
  </div>
</div>

保持一致！

为每个部分提供所需的填充。用

排成一行

.row {
  display: flex;
}

和

列

.column {
  flex: 1
}

以便每列具有相同的宽度。

水平和垂直居中，如下所示：

/* Center vertically */
.v-centered {
  align-items: center;
}

/* Center horizontally */
.centered {
  justify-content: center;
}

实施例

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

a {
  text-decoration: none;
}

.text-center {
  text-align: center;
}

header {
  background: #49B2CB;
}

header a {
  color: white;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid;
}

.section {
  padding: 3rem 1.5rem;
}


/* Make header and footer padding not as big as normal */

header.section,
footer.section {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}


/* Row, centering, wrapping */

.row {
  display: flex;
  margin: 0 -0.75rem;
}

.row.v-centered {
  align-items: center;
}

.row.centered {
  justify-content: center;
}

.row.wrap {
  flex-wrap: wrap;
}

.row>.column {
  flex: 1;
}

.row>* {
  padding: 0.75rem;
}


/* Navigation */

ul.nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul.nav li {
  float: left;
  padding: 5px;
}

ul.nav a {
  color: #797979;
}


/* Buttons */

.btn {
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: white;
}

.btn.light {
  background: #49B2CB;
}

.btn.dark {
  background: #000000;
}


/* Intro */

.intro {
  background-image: url(http://lorempixel.com/960/400/sports/1);
  color: white;
  text-align: center;
}

.intro h1 {
  font-size: 3rem;
  margin: 0;
}


/* Main */

main h2 {
  margin: 0.5rem 0;
}


/* Make main images responsive */

main img {
  display: block;
  height: auto;
  max-width: 100%;
}


/* Footer */

footer figure {
  margin: 0;
}

footer .nav {
  text-align: center;
}

@media screen and (max-width: 767px) {
  main .row {
    flex-direction: column;
  }
}

<div class="container">
  <header class="section">
    <div class="row v-centered centered">
      <div class="column"><img src="http://via.placeholder.com/200x50?text=TEAM-SKY" alt=""></div>
      <div class="column text-center"><a href="#">shop</a></div>
      <div class="column text-center"><a href="#">checkout</a></div>
      <div class="column text-center"><a href="#">video</a></div>
      <div class="column"><input type="text" placeholder="Search ..."></div>
    </div>
  </header>
  <section class="section intro">
    <div class="row v-centered">
      <div>
        <h1>Team Sky</h1>
        <p>the road to yellow</p>
        <a href="#" class="btn light">shop team sky</a>
      </div>
    </div>
  </section>
  <main class="section">
    <h2>TEAM NEWS</h2>
    <div class="row">
      <div class="column"><img src="http://via.placeholder.com/400x200" alt="">
      </div>
      <div class="column">
        <article>
          <h3>Heading 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat eligendi voluptas voluptate ut distinctio aspernatur perferendis minima, repellendus consequatur, incidunt, velit ipsum est suscipit veniam fugiat tempora, rem dolore! Commodi?</p>
          <a href="" class="btn dark">More</a>
        </article>
      </div>
    </div>
    <div class="row">
      <div class="column"><img src="http://via.placeholder.com/400x200" alt="">
      </div>
      <div class="column">
        <article>
          <h3>Heading 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, reiciendis dolor nulla maiores! Eaque quaerat quas optio quam odio inventore totam odit nobis blanditiis facere iure rem, praesentium et similique.</p>
          <a href="" class="btn dark">More</a>
        </article>
      </div>
    </div>
    <div class="row">
      <div class="column"><img src="http://via.placeholder.com/400x200" alt="">
      </div>
      <div class="column">
        <article>
          <h3>Heading 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore illo mollitia consequatur laborum nulla, eos incidunt iusto explicabo voluptate molestias dolorum dolores, at, dolor temporibus ex tenetur quaerat, ducimus sequi.</p>
          <a href="" class="btn dark">More</a>
        </article>
      </div>
    </div>
    <div class="row">
      <div class="column"><img src="http://via.placeholder.com/400x200" alt="">
      </div>
      <div class="column">
        <article>
          <h3>Heading 4</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit amet odio quaerat sit voluptates aut quisquam tempore ipsa repellat ipsam atque deserunt, quis voluptatum quos aliquid laudantium dolorum accusamus.</p>
          <a href="" class="btn dark">More</a>
        </article>
      </div>
    </div>
  </main>
  <footer class="section">
    <div class="row centered wrap">
      <figure><img src="http://via.placeholder.com/100x50?text=Customer 1" alt="">
      </figure>
      <figure><img src="http://via.placeholder.com/150x50?text=Customer 2" alt="">
      </figure>
      <figure><img src="http://via.placeholder.com/75x50?text=Customer 3" alt="">
      </figure>
      <figure><img src="http://via.placeholder.com/100x50?text=Customer 4" alt="">
      </figure>
      <figure><img src="http://via.placeholder.com/200x50?text=Customer 5" alt="">
      </figure>
    </div>
    <div class="row centered">
      <ul class="nav">
        <li><a href="">Link 1</a>
        </li>
        <li><a href="">Link 2</a>
        </li>
        <li><a href="">Link 3</a>
        </li>
        <li><a href="">Link 4</a>
        </li>
        <li><a href="">Link 5</a>
        </li>
      </ul>
    </div>
  </footer>
</div>

背景图像不会移动，如何集中一切？

2 个答案:

不同的方法（使用flexbox）

实施例