个人中心
gpt4 book ai didi

css - 我的头像哪里去了？带有 flexbox 的背景图片

转载 作者：太空宇宙 更新时间：2023-11-04 07:19:31 27 4
gpt4 key购买 nike

我有一个图像应该位于列上方和导航栏下方，高度为 100 vh。然而，当图像应该存在的空间在那里时，图像本身似乎已经消失了。该 URL 确实也指向一个站点，因此它并没有损坏。我想弄清楚为什么我的图像没有渲染，以及我可以做些什么来帮助它渲染。 使用 Flexbox 执行此操作的好方法是什么？ flexbox 是最有效的方法吗？

这是我的 HTML:

 <html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">


  </head>
  <body>
    <header>
 <nav>
   <li><a href = "#"> Home</a></li>
   <li><a href = "#"> Heading1</a></li>
   <li><a href = "#"> Heading2</a></li>
   <li><a href = "#"> Heading3</a></li>
 </nav>
    </header>

  <div class="hero">
  </div>


  <div class="container">
      <div class="side1">
        <h2>Column 1</h2>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

      <div class="main-content">
      <h2>Main-content</h2>
        <p>
          "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
        </p>
      </div>

      <div class="side2">
        <h2>Column 2</h2>
          <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
      </div>
    </div>
  </body>
</html>

这是我的 CSS...

    * {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  width:100%;
}

header {
  -webkit-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
 box-shadow: -1px 2px 17px 0px    rgba(0,0,0,0.75);
 display: block;
  margin-top:-10px:
  width: 100%;
  border-radius: 5px;
  background-color: white;
  border-color: black;
  height: 30%;
  padding-right:0px;
}

.hero {
height: 100vh;
background: url(https://www.pexels.com/photo/coffee-writing-computer-blogging-34676/);
background-size: cover;
width: 100%;
padding-bottom: 20px;
}

nav {
  display: block;
}

nav li {
  font-weight: 700;
  list-style-type: none;
  text-align: center;

  font-size: 25px;
  font-weight: bold;
  font-family: Roboto, sans-serif;
}

li {
  border-top: grey solid 1px;

}

nav a {
  text-decoration: none;
  color: grey;
  display:inline-block;
  line-height: 45px;
}

li:nth-child(1){
  border-top: none;
   padding-bottom:10px;
  margin:0px;
}

li:nth-child(2){
padding-top:10px;
margin:0px;

}

li:nth-child(3){
margin:0px;
padding-top:10px;

}

li:nth-child(4){
margin:0px;
padding-top:10px;

}


.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  font-family: Roboto,sans-serif;
  line-height: 1.6;
}

.side1 {
  -webkit-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
 box-shadow: -1px 2px 17px 0px    rgba(0,0,0,0.75);
  width:100%;
  background: white;
  border-color: black;
  text-align: center;
  margin-bottom: 10px;
}

.main-content {
  -webkit-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
 box-shadow: -1px 2px 17px 0px    rgba(0,0,0,0.75);

 width:100%;
 background: white;
 border-color: black;
 text-align: center;
 margin-bottom: 10px;

}

.side2 {
  -webkit-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
 box-shadow: -1px 2px 17px 0px    rgba(0,0,0,0.75);
 width:100%;
 background: white;
 border-color: black;
 text-align: center;
 margin-bottom: 10px;
}

@media screen and (min-width : 726px) {


@media screen and (min-width : 900px) {
  .header {
  display:flex;
    }

    header {
      -webkit-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 2px 17px 0px rgba(0,0,0,0.75);
     box-shadow: -1px 2px 17px 0px    rgba(0,0,0,0.75);
      width: 100%;
      align-items: center;
      border-radius: 5px;
      background-color: white;
      border-color: black;
      height: 30%;
      padding: 10px;
}


    nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    li:nth-child(1){
      border-top: grey solid 1px;
       padding-top:10px;
      margin:0px;
    }

  .container  {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .main-content {
    border-left: lightgrey 1px solid;
    border-right: lightgrey 1px solid;
    width: 33.3%;
  }

  .side1 {

      width: 30%;
  }


  .side2 {

    width: 30%;
  }

}

最佳答案

.hero 类的背景 url 不正确。改用这个:

背景:url(https://images.pexels.com/photos/34676/pexels-photo.jpg);

您当前使用的 url 链接到显示图像的网站，而不是图像本身(这是您想要的背景)。

关于css - 我的头像哪里去了？带有 flexbox 的背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50431059/

27 4 0
文章推荐： 关于对象数组和从文件读取下一行的 Java 错误
文章推荐： c++ - 使用面向对象的 C 库
文章推荐： java - 我可以在 Java Web 应用程序中使用 Servlet 来使用 Facelet 吗？
文章推荐： c - 函数调用作为其他函数的参数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com