배경 이미지는 배경 이미지를 표시하지 않습니다.

2865 단어 background-imageCSS

상대 경로가 표시되지 않을 때의 처리 방법 사용


HTML·CSS를 처음 배운 저는 CSS 내에서 배경 이미지를 background-image 표시할 때 잘 보이지 않습니다...
내가 조사해 보니 아래의 일을 알게 되었다.
  • 絶対パス 및 相対パス.

  • 사용相対パス 시 계층 주의가 필요하다.
    • 절대 경로란 URL 등으로 페이지와 파일을 직접 지정하는 방법이다.
    이번에는 상대 경로를 사용하여 배경 이미지를 지정할 때의 요점을 요약합니다.
    초보적인 내용이지만 자신의 학습 기록으로 총결하였다.

    패배의 원인은 어디서 본 패스입니까?


    이번에 사용된 파일의 계층 구조는 다음과 같다.
  • 상위 폴더
  • index.html
  • CSS 폴더 → styles.css(여기서 이미지 파일 지정)
  • img 폴더 → pic1.png(배경에 보이고 싶은 녀석)
    • 이러한 계층 구조에서는 지금까지 HTML 내 <img src="〜"> 에서 이미지 파일을 지정한 경험에 따라
    이번처럼 CSS에서 배경 이미지를 지정할 때 단순히 img 디렉터리에 있는pic1을 지정하면 됩니다.
    ▶ 구체적으로 이런 느낌
    styles.css
    /* 略 */
.top-wrapper {
  background-image: url("img/pic1.png");
  background-size: cover;
}
/* 略 */
    이것이 바로 실패의 원인이다.
    즉, 상대 경로로 URL을 지정할 때 HTML 파일이 아니라 CSS 파일에서 볼 수 있는 경로를 지정해야 합니다.
    그래서
  • styles.css 파일에서 이전 계층의 CSS 폴더로 돌아가기 (./),
  • CSS 폴더와 같은 층의 img 폴더에 있는pic1.png 파일 지정(img/pic1.png)
    • styles.css
    /* 略 */
.top-wrapper {
  background-image: url("../img/pic1.png");
  background-size: cover;
}
/* 略 */
    해결됨
    이것밖에 없지만 패스의 의미를 알 수 있는 계기가 돼서 너무 좋아요!
    ▶ 참고 사이트
  • 배경 이미지가 표시되지 않았습니다!절대 경로 및 상대 경로 이해
  • css에서 배경에 지정된 이미지만 보이기
    • 또한 표시하고자 하는 이미지의 크기에 따라width와height를 설정하지 않으면 충분한 공간을 확보하지 못하고 이미지도 차단됩니다.
  • 배경 이미지가 <body>에서 유효하지 않음
    • display: table; 사용 방법
    연말까지 매일 지속적으로 웹 사이트를 만드는 대학생~ 30일째 대여!내비게이션 막대의 슬라이딩 진입 (css로만 설치) &overflow~

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage