Question

我使用免费代码营学习，前几天到了Portfolio Project。我已经取得了一些很大的进步并且学到了很多东西，但我仍然坚持一个非常重要的一点。我的背景图像不断消失。它们随机消失。我可以通过重写代码（不仅仅是复制/粘贴代码）来暂时修复它，但它总是会再次发生。

如果大家不介意，请查看我的代码。要快速查找，请搜索 aboutpage 和 Portfoliopage （在HTML和CSS中）以查看我正在谈论的具体实例。当然，也许代码的其他一些方面正在酝酿它。自从我添加任何JavaScript之前就已经发生过这种情况。

Here is my codepen。

HTML

    <html>

<head>

  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">  


  <!--<script>          
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script> -->

  <title>David Clark | Portfolio</title>

  </head>

<!--<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">David Clark</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
    <li class="active">
      <a href="#">About</a>
        </li>
    <li>
      <a href="#">Portfolio</a>
    </li>
    <li>
      <a href="#">Contact</a>
      </li>
    </ul>
    </div>
    </nav>-->

<body data-spy="scroll" data-target=".navbar" data-offset="0"> 
  <nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="aboutpage">David Clark</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
    <li class="active">
      <a href="#aboutpage">About</a>
        </li>
    <li>
      <a href="#portfoliopage">Portfolio</a>
    </li>
    <li>
      <a href="#">Contact</a>
      </li>
    </ul>
    </div>
    </nav>
  <div id="aboutpage">
    <article>
    <div class="block text-center">

      <img class="portrait" src="https://avatars0.githubusercontent.com/u/15970036?v=3&s=460">

    <h1>david clark</h1>

    <div class="btnList">
      <a class="btn btn-social-icon btn-bootstrap" href="https://twitter.com/daviddoes___">
    <span class="fa fa-twitter"></span>
  </a>
       <a class="btn btn-social-icon btn-bootstrap" href="https://github.com/SlouchingToast">
    <span class="fa fa-github"></span>
  </a>
      <a class="btn btn-social-icon btn-bootstrap" href="https://www.linkedin.com/in/creativedavid">
    <span class="fa fa-linkedin"></span>
  </a>

      </div>

      </article>


      </div>

</div>

  <div id="portfoliopage">
    <article>
    <div class="portblock">
      <h1>Hello!</h1>

      </article>

    </div>

  </div>

  </body>

</html>

CSS

.navbar-nav{
  font-family:'Open Sans Condensed', sans-serif;
  font-size: 2.0em;

}

.navbar-brand{
  font-family:'Open Sans Condensed', sans-serif;
  font-size:2.0em;
}

body{
  font-family:'Open Sans Condensed', sans-serif;
  color:white;
  margin:0;
  padding:0;
}

h1{
  padding: 0;
  margin-top: -1%;
  text-align: center;
  color:rgb(54,54,54);
  font-size: 80px;
  text-decoration: underline;
}

.btn:hover{
  color:#FEEE8B;
}

.btn{
  align-text: center;
  margin-bottom:3%;
  margin-right:5px;
  margin-left:5px;
  border-radius: 0 !important;
  font-size:20px;
  color:rgb(54,54,54);

}

article{
 padding-bottom:10px; 
}

.block{
  background-color:rgba(157,178,197,.6);
  opacity:1;
  width:50%;
  height:12%;
  margin-right:auto;
  margin-left:auto;
  margin-top:10%;
  object-border:10px;

}

.portblock{
  text-align:right;
  background-color:rgba(157,178,197,.6);
  opacity:1;
  width:50%;
  height:12%;
  margin-top:10%;
  object-border:10px;
  margin-left:auto;

}

.portrait{
  width:40%;
  height:auto;
  border-radius:50%;
  margin-bottom:3%;
  margin-top:3%;
  opacity:.9;
}

#aboutpage{
  background-image:url(https://crossorigin.me/http://i.imgur.com/Qt3kOoF.jpg);
  no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:800px;
  padding: 1px;

}

#portfoliopage{
  background-image:url(https://crossorigin.me/http://i.imgur.com/IYXAg7k.jpg);
  no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:800px;
  padding: 1px;

}

的JavaScript

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

非常感谢！

Answer 1

您是否尝试过将背景图片：url（）值包装在引号中？像这样：background-image：url（'https://crossorigin.me/http://i.imgur.com/Qt3kOoF.jpg'）;

Answer 2

所以在chrome中看到它我注意到一个net :: ERR_SPDY_PROTOCOL_ERROR，这是与图像有关的chrome的“我们不知道”错误。

在Firebug中打开它说“图像损坏或截断”。

如果可以的话，在其他地方托管您的图片，这应该可以修复它。关于它们现在如何设置的一些原因导致它们被浏览器阻止。

Answer 3

<强>解决

问题在于图像主机（imgur）。相反，我将照片上传到我的Dropbox。

背景图片不断消失

3 个答案: