CSS를 영리하게 사용하여 뷰포트의 배경 이미지를 수정하세요.-프런트엔드 Q&A-php.cn

CSS를 영리하게 사용하여 뷰포트의 배경 이미지를 수정하세요.

醉折花枝作酒筹

풀어 주다： 2021-08-12 16:44:50

원래의

1751명이 탐색했습니다.

이전 글에서 요소의 배경을 설정하는 방법에 대해 알아보았습니다. "한 번의 트릭으로 CSS 요소의 다채로운 배경 얻기"를 읽어보세요. 이번에는 뷰포트에서 배경 이미지를 수정하는 방법에 대해 알아보겠습니다. 필요한 경우 참고하시면 됩니다.

배경 이미지를 수정하고 싶을 때는 어떻게 해야 하나요?

  <style>
    body{
      background-image: url("images/1.jpg");
      background-repeat:no-repeat;
      background-attachment:fixed;
    }
  </style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>

로그인 후 복사

이 작은 예제의 결과는

CSS를 영리하게 사용하여 뷰포트의 배경 이미지를 수정하세요.

입니다. 이 작은 예제의 배경은 텍스트가 움직여도 실제로 변하지 않는다는 것을 알 수 있습니다. 많은 것을 알고 나면, 고정할 배경을 설정하는 데 어떤 속성을 사용할 수 있는지 살펴보겠습니다.

background-attachment 속성은 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지를 설정합니다.

이 속성에는 여러 값이 있으며 그중 스크롤이 기본값입니다. 고정은 페이지의 나머지 부분을 스크롤할 때 배경 이미지가 이동한다는 의미이고, 고정은 페이지의 나머지 부분을 스크롤할 때 배경 이미지가 이동하지 않음을 의미합니다. local 값도 있습니다. 이 키 속성 값은 배경이 요소의 콘텐츠에 대해 고정되어 있음을 나타냅니다. 요소에 스크롤 메커니즘이 있는 경우 배경은 요소의 내용과 함께 스크롤되며 배경의 그리기 영역과 위치 지정 영역은 이를 포함하는 테두리가 아닌 스크롤 가능 영역을 기준으로 합니다.

추천 학습: css 비디오 튜토리얼

위 내용은 CSS를 영리하게 사용하여 뷰포트의 배경 이미지를 수정하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!