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;
}
자바 스크립트
$(".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;
}
}
});
});
정말 고마워요!
그래, 내가 원래 작성한 방법인데, Free Code Camp gitter room에있는 누군가는 그렇게 말하지 않았다. 그것은 어느쪽으로 든 차이를 만들지 않았습니다. ""을 삽입하고 코드에 그대로 둡니다. – David