如何将图像放在网页上的背景图像上

时间：2017-12-18 08:40:32

标签： html css image

enter image description here我试图创建一个有背景图片的网页，然后在我的导航栏下方有一种位于其下方的封面图片。

我设法获得了背景图片，但下一张图片就位于页面底部。

我已经尝试过关于如何执行此操作的一些帖子和教程，但同样的情况仍在继续。

代码段示范：

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
}

header {
  height: 100 vh;
  background-size: cover;
  background-position: center;
}

#wrapper {
  width: auto;
  margin: 0 auto;
}

#row, #logo {
  border: 1px;
  float: left;
  min-height: 150px;
  color: white;
}

#row {
  float: left;
  width: 70%;
}

.main-nav {
  float: center;
  list-style: none;
  margin-top: 100px;
  margin-left: 350px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
}

.main-nav li.active a {
  border: 1px solid white;
}

.main-nav li a: hover {
  border: 1px solid white;
}

#logo img {
  width: 150px;
  height: 145px;
  float: left;
  padding-left: 10%;
}

body {
  /*background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(hockey.jpg);*/
  background-size: cover;
  font-family: sans-serif;
}

hr {
  width: 100%;
  height: 1px;
  background: #fff;
}

.title {
  position: relative;
  width: 1200px;
  margin-left: 0px;
  margin-top: 0px;
}

.instagram img {
  width: 20px;
  float: left;
  margin-top: 10px;
  padding-left: 960px;
}

.twitter img {
  width: 65px;
  float: left;
  margin-top: 10px;
  padding-left: 30px;
}

body, html {
  height: 100%;
}

.bg {
  /* The image used */
  background-image: url(https://goravens.ca/wp-content/themes/goravens/images/events/womens-hockey-3.jpg);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
h1 {
  color:white;
  font-size: 70px;
  text-align: center;
  margin-top: 275px;
  padding-left:150px;
}
*/
＆＃13; 
<header>
  <div id="wrapper">
    <div id="logo">
      <img src="logo.png">
    </div>
    <div id="row">
      <ul class="main-nav">
        <li class="active"><a href="/Users/jenny/Desktop/SCHOOL/COMPUTER SCIENCE/HOME.html">HOME</a></li>
        <li><a href="/Users/jenny/Desktop/SCHOOL/COMPUTER SCIENCE/PHOTOS.html">PHOTOS</a></li>
        <li><a href="/Users/jenny/Desktop/SCHOOL/COMPUTER SCIENCE/PLAYERS.html">PLAYERS</a></li>
        <li><a href="/Users/jenny/Desktop/SCHOOL/COMPUTER SCIENCE/NEWS.html">NEWS</a></li>
        <li><a href="/Users/jenny/Desktop/SCHOOL/COMPUTER SCIENCE/SCHEDULE.html">SCHEDULE</a></li>
      </ul>
      <br>
      <br>
    </div>
    <div class="block_1"></div>
    <hr>
    <ul class="instagram">
      <a href="https://www.instagram.com/embrunpanthers/"><img src="instagram.png"></a>
    </ul>
    <ul class="twitter">
      <a href="https://twitter.com/NCJHLEmbrun?lang=en"><img src="twitter.png"></a>
    </ul>
  </div>
</header>
<img src='https://cdn.hockeycanada.ca/hockey-canada/Team-Canada/Men/World-Cup/2016/sep_29_wch_team.jpg'>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我认为你应该摆脱花车。他们只是对页面的推理更加困难，至少对我而言。 我使用css的flexbox功能来定位标题中的元素。您可以在此处详细了解：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ enter link description here

我仍然不确定您是否希望标题位于顶部，然后在向下滚动时消失，或者更确切地说，如果您希望它在内容上浮动并保持在顶部，即使向下滚动也是如此。因此我在css中留下了评论 - 取消注释以查看其他选项。

HTML：

 <body>
  <div class="bg">
    <header>
      <div class="logoContainer">
        <img src="http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg">
      </div>
      <ul class="main-nav">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">PHOTOS</a></li>
        <li><a href="#">PLAYERS</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">SCHEDULE</a></li>
      </ul>
    </header>
    <div class="socialLinksContainer">
      <div class="instagram">
        <a href="#"><img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"></a>
      </div>
      <div class="twitter">
        <a href="#"><img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-13.jpg"></a>
      </div>
    </div>
    Main content goes here
  </div>
</body>

CSS：

    header {
  height: 10vh;
  background-color: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  //uncomment this for the header to float over the content
  //position: fixed;
  //top: 10px;
}

.logoContainer {
  height: 10vh;
}

.logoContainer > img {
  max-width: 100%;
  max-height: 100%;
}

.main-nav {
  list-style: none;
  margin-top: 100 px;
  margin-left: 350 px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: none;
  padding: 5 px 10 px;
  font-family: "Roboto", sans - serif;
  font-size: 15 px;
}

.main-nav li.active a {
  border: 1 px solid white;
}

.main-nav li a: hover {
  border: 1 px solid white;
}

# logo img {
  width: 150 px;
  height: 145 px;
  padding-left: 10 %;
}

body {
  font-family: sans-serif;
  color: red;
}

hr {
  width: 100 %;
  height: 1 px;
  background: #fff
}

.socialLinksContainer {
  position: fixed;
  right: 5px;
  bottom: 5px;
  display: flex;
  flex-direction: row;
}

.title {
  position: relative;
  width: 1200 px;
  margin-left: 0 px;
  margin-top: 0 px;
}

.instagram > a > img {
  max-width: 30px;
  max-height: 30px;
  margin-top: 10 px;
  padding-left: 960 px;
}

.twitter img {
  max-width: 30px;
  max-height: 30px;
  margin-top: 10 px;
  padding-left: 30 px;
}

body,
html {
  height: 100 %;
}

body {
  background-image: url('https://cdn.hockeycanada.ca/hockey-canada/Team-Canada/Men/World-Cup/2016/sep_29_wch_team.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.imageUnderTheNavbar {
  max-height: 50px;
}

请看一下这个小提琴：https://jsfiddle.net/5ufpomy4/4/

这是你想到的吗？

相关问题
最新问题