배경 이미지 전체 화면 효과를 구현하는 CSS

전체 인터페이스에 배경 이미지를 적용하려면 본문에 배경을 추가하는 것이 자연스러운 아이디어입니다.

body {
     width：100%；
     height: 100%;
    /* 加载背景图 */
    background: url("../static/images/index/backImg.jpg") no-repeat;
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
　　background-color: rgba(41, 50, 39, 1);
}

본문의 높이가 0이므로 이미지를 표시할 수 없습니다. 해결 방법은 html의 너비와 높이를 100%로 설정하여 본문이 중요하고 배경 이미지가 전체 화면을 가득 채우도록 하는 것입니다.

(추천 튜토리얼: CSS 튜토리얼)

확장 지식:

url(images/beijing.png) - 이미지 경로 위치

no-repeat - 이미지가 반복되지 않습니다. - 중앙은 페이지 왼쪽에서의 위치이고, 0px는 페이지 상단에서의 위치입니다.

background-position: center 0 - 위와 동일하게 이미지의 위치입니다. : 커버; - 배경 이미지가 배경 영역을 완전히 덮도록 배경 이미지를 충분히 큰 크기로 확장합니다. 배경 이미지의 일부가 배경 위치 지정 영역에 표시되지 않을 수 있습니다.

min-height: 100vh - 창의 높이, "보기 영역"은 브라우저 내부에 표시되는 영역의 크기를 나타냅니다. window.innerWidth/ window.innerHeight 크기.

추천 관련 비디오 튜토리얼:

위 내용은 배경 이미지 전체 화면 효과를 구현하는 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!