w3Schools 웹 사이트에서 Parallax Template을 다운로드했습니다. this으로 이동하여 Ctrl + S를 눌러 템플릿을 다운로드했습니다. 어디서나 템플릿 배경의 이미지를 찾을 수 없습니다. 원본 시차 이미지 대신 다른 이미지를 넣으려고 코드를 수정하려고했지만 작동하지 않았습니다. 나는 프로그래밍 지식이 매우 제한적이다. 뭘 잘못했는지 알아 내 줄 수있어?다운로드 후 바로 HTML 템플릿이 작동하지 않습니다.
그것은 CSS 어떤 상대 URL 사용하기 때문입니다 : 그것은 어떤을하기 때문에
https://w3schools.com/w3images/parallax1.jpg
을하지만 : 그것은 w3schools.com에있는 경우, URL이 다음과 같은 위치로 이동합니다
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('/w3images/parallax1.jpg');
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url("/w3images/parallax2.jpg");
min-height: 400px;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("/w3images/parallax3.jpg");
min-height: 400px;
}
을
file:///w3images/parallax1.jpg
는이 문제를 해결하려면 코드를 변경 : 이상 해당 도메인과 파일 시스템에 지금, 그것은에 갈 것이다
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('https://w3schools.com/w3images/parallax1.jpg');
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url("https://w3schools.com/w3images/parallax2.jpg");
min-height: 400px;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("https://w3schools.com/w3images/parallax3.jpg");
min-height: 400px;
}
기본 HTML 파일의 28-44 행에 있습니다.
이것은 질문의 일부는 아니지만 아이콘 글꼴을 수정하려고합니다. 당신이 (내가 크롬에있어)으로 저장하는 브라우저에 따라 조금씩 다를 수 있습니다
<link rel="stylesheet" href="./W3.CSS Template_files/w3.css">
<link rel="stylesheet" href="./W3.CSS Template_files/css(1)">
<link rel="stylesheet" href="./W3.CSS Template_files/font-awesome.min.css">
참고 : 기본 HTML 파일의 라인 9-11에, 당신은 이런 식으로 뭔가를 찾을 수 있습니다.
이러한 자산을 수정할 필요가 없으며 사실 온라인으로 호스팅됩니다. 브라우저가 똑똑하고 다운로드하기 만하면됩니다. 그러나 이렇게하면 많은 문제가 발생합니다.이 경우 아이콘 글꼴이 올바르게 표시되지 않습니다.
당신이로 교체하는 것이 좋습니다 :
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
DR
을 기본 HTML 파일에서 함께 줄을 28-44 교체 :/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('https://w3schools.com/w3images/parallax1.jpg');
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url("https://w3schools.com/w3images/parallax2.jpg");
min-height: 400px;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("https://w3schools.com/w3images/parallax3.jpg");
min-height: 400px;
}
9-11 줄은 다음과 같습니다 :
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
우리가 간다! 이제는 모든 것이 작동해야합니다.
Mozilla Firefox를 사용하는 경우 두 번째 탭 "미디어"를 눌러야 만 오른쪽 클릭을하고 "페이지 정보보기"를 클릭하십시오. 전체 경로로 모든 배경 이미지를 다운로드 할 수 있습니다.
이미지가 CSS에서 배경으로 처리 될 수 있습니다. 스타일 시트를 확인해야합니다. –