CSS는 반응형 전체 화면 배경 이미지를 구현합니다.
- 巴扎黑원래의
- 2017-05-27 17:24:362634검색
현재 가장 인기 있는 웹 페이지 형식 중 하나는 전체 화면 대형 이미지입니다. 이 기사에서는 이 효과를 달성하는 가장 간단한 방법을 사용합니다. CSS 속성 background-size가 사용됩니다. , 자바스크립트가 필요하지 않습니다.
핵심 개념
배경 크기 속성을 사용하여 전체 뷰포트를 채웁니다.
CSS 속성의 배경 크기 값이 커버이면 브라우저는 자동으로 뷰포트의 너비와 너비를 조정합니다. 배경 이미지는 뷰포트의 너비와 높이보다 크거나 같을 때까지 높이에 비례합니다
미디어 쿼리를 사용하여 모바일 장치에 더 작은 크기의 배경 이미지를 제공하세요
모바일 기기용 배경 이미지 크기는? 데모에서 우리가 보는 배경 이미지의 실제 크기는 5498px * 3615px, 이러한 큰 크기 이미지를 사용하는 목적은 1.7MB 이미지 크기를 희생하면서 흐릿한 디스플레이 없이 대부분의 와이드스크린 모니터를 만족시키는 것입니다.
그러나 모바일 장치에서는 그렇게 큰 이미지를 사용할 필요가 없습니다. 동시에, 특히 모바일 네트워크에서는 큰 이미지로 인해 로딩 속도가 느려집니다.
이 기술 솔루션에서는 모바일 장치에 작은 배경 이미지를 제공하는 것이 선택 사항이라는 점에 유의해야 합니다.
Practice
HTML
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>나중에 배경 이미지가 전체 브라우저 뷰포트를 채울 수 있도록 body 태그에 대한 배경 이미지를 지정합니다.
사실 이 솔루션은 모든 블록 수준 컨테이너에 효과적일 수 있습니다. 블록 수준 컨테이너의 너비와 높이가 동적이면 배경 이미지가 자동으로 확장 및 축소되어 전체 컨테이너를 채웁니다.
CSS body 태그의 스타일은 다음과 같습니다:
body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #**46;
}위에서 가장 중요한 것은:
background-size: cover;
이런 식으로 브라우저는 너비와 높이가 될 때까지 배경 이미지의 크기를 비례적으로 조정합니다. 배경 이미지의 크기는 컨테이너의 너비와 높이보다 작지 않습니다(위 예에서는 body 태그입니다).
여기서 주의할 점은 배경 이미지가 body 태그의 크기보다 작은 경우(예: 고해상도 디스플레이에서 또는 페이지 콘텐츠가 특히 큰 경우) 브라우저가 이미지를 늘린다는 것입니다. . 우리 모두는 이미지가 늘어나면 흐려진다는 것을 알고 있습니다.
그러므로 배경 이미지를 선택할 때 크기에 특히 주의하세요. 큰 화면 크기를 처리하기 위해 데모에 사용된 이미지 크기는 5498px * 3615px입니다.
동시에 배경 이미지를 뷰포트를 기준으로 항상 중앙에 유지하기 위해 다음을 선언합니다.
background-position: center center;
위 규칙은 배경 이미지 크기 조정의 원점을 뷰포트 중앙에 배치합니다.
우리가 해결해야 할 다음 문제는 콘텐츠의 높이가 뷰포트의 높이보다 클 때 스크롤 막대가 나타나는 것입니다. 우리는 사용자가 스크롤하는 동안에도 배경 이미지가 뷰포트를 기준으로 고정된 상태로 유지되기를 원합니다.
해결책은 다음과 같습니다.
background-attachment: fixed;
그것 이미지 크기를 압축합니다. 이렇게 하면 이미지 크기가 1741KB에서 114KB로 줄어들어 93%가 절약됩니다. 다음은 미디어 쿼리가 작성되는 방식입니다.
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
} 위 미디어 쿼리는 최대 너비: 767px입니다.
중단점으로 설정합니다. 즉, 브라우저 뷰포트가 767px보다 크면 큰 배경 이미지가 사용되고, 그렇지 않으면 작은 배경 이미지가 사용됩니다. 위 미디어 쿼리를 사용할 때의 단점은 브라우저 창을 1200px에서 640px로(또는 그 반대로) 축소하면 작거나 큰 배경 이미지가 로드될 때 잠시 깜박이는 것을 볼 수 있다는 것입니다. 위 내용은 CSS는 반응형 전체 화면 배경 이미지를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!