CSS에서 반복 없이 이미지 스트레칭을 설정하는 방법

CSS에서 반복 없이 이미지 늘이기 설정 방법: 먼저 "배경: url("../../../static/imagic/sy.jpg")"을 통해 이미지 경로를 설정한 다음 "no-repeat"를 전달합니다. " 속성 설정이 이미지를 복제하지 않는지 확인하세요.

이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

css 배경 이미지를 반복하지 않고 전체 화면으로 늘리도록 설정

더 이상 고민하지 말고 그냥 가겠습니다. 너비와 높이만 표시했습니다. 이 상황은 100% 발생합니다.

<template>
  <div class="hello"></div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  }
};
</script>

<style scoped>
.hello {
  background: url("../../../static/imagic/sy.jpg") no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;//全屏展示
}
</style>

배경: url("../../../static/imagic/sy.jpg ") - 이미지 경로의 위치;

no -repeat ——이미지가 반복되지 않습니다.

center 0px——center는 페이지 왼쪽에서의 위치, 0px는 페이지 상단에서의 위치입니다. page;

background-position: center 0 —— 이미지의 위치이며 위와 동일합니다.

background -size:cover;—— 배경 이미지가 완전히 덮일 수 있도록 충분히 큰 크기로 확장합니다. 배경 영역. 배경 이미지의 일부가 배경 위치 지정 영역에 표시되지 않을 수 있습니다.

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

추천 학습: "css 동영상 튜토리얼"

위 내용은 CSS에서 반복 없이 이미지 스트레칭을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!