CSS 뷰포트 단위 vh 및 vw를 사용하여 전체 화면 배경 이미지를 만드는 방법-CSS 튜토리얼-php.cn

CSS 뷰포트 단위 vh 및 vw를 사용하여 전체 화면 배경 이미지를 만드는 방법

WBOY

풀어 주다： 2023-09-13 10:57:14

원래의

1119명이 탐색했습니다.

使用 CSS Viewport 单位 vh 和 vw 创建全屏背景图像的方法

CSS 뷰포트 단위 vh 및 vw를 사용하여 전체 화면 배경 이미지를 만드는 방법에는 구체적인 코드 예제가 필요합니다.

모바일 장치의 인기와 반응형 디자인으로 인해 전체 화면 배경 이미지는 디자인의 일반적인 요소가 되었습니다. . 전통적인 방법은 이를 달성하기 위해 JavaScript 또는 jQuery를 사용하는 것이지만 이제는 CSS 뷰포트 단위 vh 및 vw를 활용하여 전체 화면 배경 이미지를 쉽게 구현할 수 있습니다. 뷰포트 단위는 뷰포트(즉, 브라우저 창)의 크기에 상대적이며, vh는 뷰포트 높이의 백분율을 나타내고, vw는 뷰포트 너비의 백분율을 나타냅니다.

다음 예에서는 CSS 뷰포트 단위를 사용하여 전체 화면 배경 이미지를 만드는 방법을 보여줍니다. 먼저 HTML 파일을 생성하고 그 안에 다음 코드를 추가하겠습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .fullscreen-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      z-index: -1;
    }
    .fullscreen-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div class="fullscreen-bg">
    <img src="background-image.jpg" alt="Background Image">
  </div>
</body>
</html>

로그인 후 복사

위의 예에서는 fullscreen-bg라는 클래스 이름으로 <div> 요소는 전체 뷰포트를 채울 것입니다. 배경 이미지를 표시하기 위해 내부에 <img> 요소를 삽입했습니다. 그런 다음 CSS를 사용하여 이러한 요소의 스타일을 지정합니다. fullscreen-bg 的 <div> 元素，它将填充整个视口。我们在其中插入了一个 <img> 元素，用于显示背景图像。然后，我们使用 CSS 来设置这些元素的样式。

首先，我们将 .fullscreen-bg 的 position 属性设置为 fixed，这样它就可以始终保持在浏览器视口的顶部和左侧。然后，我们通过 top: 0 和 left: 0 将其定位在网页的左上角。接下来，我们使用 width: 100vw 和 height: 100vh 将其宽度和高度设置为视口的百分比，这样它就可以填满整个视口。然后，我们使用 overflow: hidden 将其溢出内容隐藏起来，并使用 z-index: -1 将其放置在其他内容的下方。

接下来，我们设置了.fullscreen-bg img 的宽度和高度为 100%，并使用 object-fit: cover 来填满整个 <img> 元素的容器，确保图像在任何设备上都能等比例缩放，并完整显示在视口中。

最后，我们将示例图像的路径设置为 background-image.jpg

먼저, .fullscreen-bg의 position 속성을 fixed로 설정하여 브라우저 뷰포트 상단 및 왼쪽에 항상 남아 있을 수 있도록 합니다. . 그런 다음 top: 0 및 left: 0을 통해 페이지 왼쪽 상단에 배치합니다. 다음으로, width: 100vw 및 height: 100vh를 사용하여 너비와 높이를 뷰포트의 백분율로 설정하여 전체 뷰포트를 채웁니다. 그런 다음 overflow:hidden을 사용하여 오버플로 콘텐츠를 숨기고 z-index: -1를 사용하여 다른 콘텐츠 아래에 배치합니다.

다음으로 .fullscreen-bg img의 너비와 높이를 100%로 설정하고 object-fit:cover를 사용하여 &lt A 전체를 채웁니다. ;img> 요소에 대한 컨테이너로, 이미지가 모든 기기에서 비례적으로 확대되고 뷰포트에 완전히 표시되도록 합니다. 🎜🎜마지막으로 샘플 이미지의 경로를 Background-image.jpg로 설정해 주셨는데, 원하시는 배경 이미지의 경로로 바꾸시면 됩니다. 🎜🎜위의 샘플 코드를 사용하면 CSS 뷰포트 단위 vh 및 vw를 쉽게 사용하여 전체 화면 배경 이미지를 만들 수 있습니다. 디자인 요구 사항에 맞게 이미지 경로를 자신의 배경 이미지로 바꾸는 것을 잊지 마세요. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 CSS 뷰포트 단위 vh 및 vw를 사용하여 전체 화면 배경 이미지를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!