1
無料コードキャンプを使って学習しています。数日前にPortfolio Projectに行っています。私はいくつかの大きな進歩を遂げ、かなり学んだことがありますが、私はかなり重要なことをしています。私の背景イメージは消えていく。彼らは無作為の時間に消えます。コードをコピーして貼り付けるのではなく、コードを書き直して一時的に修正することはできますが、いつでも同じことが繰り返されます。背景画像が消えていく
あなたが気にしない場合は、私のコードを見てください。簡単に見つけるには、具体的な例についてはページとポートフォリオ（HTMLとCSS）を検索してください。もちろん、コードのいくつかの側面がそれをボルケーピングしているかもしれません。これはJavaScriptを追加する前から発生しています。
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;
}
}
});
});
本当にありがとうございました！
これは私がもともと書いたものだが、フリーコードキャンプのジッター室の誰かはそう言わなかった。いずれにしても違いはありません。 ""を挿入してコードに残しました。 – David