CSS에서 고정된 배경 이미지를 구현하는 방법
- 藏色散人원래의
- 2018-12-01 15:18:5710098검색
소위 고정 배경 이미지란 페이지에 내용을 입력하거나 마우스를 움직여도 배경 이미지가 변경되지 않는다는 의미입니다. CSS에서 배경 이미지 고정을 구현하는 것도 매우 간단합니다. 이를 달성하기 위해 CSS의 배경 관련 속성을 사용할 수 있습니다.
권장 참조: "CSS tutorial"
그럼 우리는 이전 글에서는 CSS 을 사용하여 배경 이미지 반복 효과를 얻는 방법을 소개했습니다.
이제 계속해서 CSS 배경 이미지 고정 구현 방법을 소개해드리겠습니다.
코드는 다음과 같습니다:
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
body {
background-image: url("/test/img/154e.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
<p>这里是一行文字：圣诞节快乐！</p>
</body>
</html>효과는 아래와 같습니다:
#🎜 🎜#배경 관련 속성:
Background-attachment 속성 배경 이미지를 고정할지 아니면 나머지 이미지와 함께 스크롤할지 설정합니다. 페이지. 고정 값은 페이지의 나머지 부분을 스크롤할 때 배경 이미지가 이동하지 않음을 의미합니다.
Background-repeat 속성 배경 이미지 반복 여부와 방식을 설정합니다.
이 글은 CSS로 배경 이미지를 수정하는 방법을 간단하고 이해하기 쉽게 소개한 글입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!위 내용은 CSS에서 고정된 배경 이미지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.