CSS에서 배경 첨부의 고급 사용

이번에는 CSS의 배경부착 고급 사용방법을 알려드릴 예정인데, CSS 배경부착 사용시 주의사항은 무엇인가요? 다음은 실제 사례이므로 살펴보겠습니다.

전제는 Background-image 속성을 정의한 다음 background-attachment를 사용하여 배경 이미지의 위치가 뷰포트에 고정되어 있는지 아니면 포함 블록과 함께 움직이는지 나타내는 것입니다. 이는 배경 이미지가 스크롤 축을 따라 이동하는 방식을 정의하는 것으로 간단히 이해될 수 있습니다.
값:
scroll: 기본값, 배경 이미지는 요소를 기준으로 고정되고 페이지 스크롤에 따라 배경이 이동합니다. 즉, 배경과 콘텐츠가 바인딩됩니다.
고정: 배경 이미지가 뷰포트를 기준으로 고정되어 페이지가 스크롤될 때 배경이 움직이지 않습니다. 이는 본문에 배경이 설정되는 것과 동일합니다.
local: 배경 이미지가 요소 콘텐츠를 기준으로 고정됩니다.
inhert: 상속됨, 말할 것도 없습니다.
이 속성은 모든 요소에 적용될 수 있습니다.
1. 스크롤【배경 이미지 스크롤】
배경 첨부:스크롤을 설정합니다. 배경 이미지는 요소 자체를 기준으로 고정됩니다. 요소에 연결된 테두리입니다.

local
참고:
스크롤의 경우 일반적으로 배경이 콘텐츠와 함께 스크롤되지만 예외가 있습니다.
스크롤 가능한 요소(overflow:scroll로 설정된 요소)의 경우. background-attachment가 스크롤되도록 설정된 경우 요소 콘텐츠가 스크롤될 때 배경 이미지는 스크롤되지 않습니다.

2. local [스크롤 요소 배경 이미지 스크롤]
스크롤이 가능한 요소(overflow:scroll로 설정된 요소)의 경우 background-attachment:local을 설정하면 콘텐츠 스크롤에 따라 배경도 스크롤됩니다.
배경 이미지는 요소 자체 콘텐츠를 기준으로 위치가 지정되고 고정되기 시작하므로 요소에 스크롤 막대가 나타난 후 배경 이미지가 콘텐츠와 함께 스크롤됩니다.

<style>
p{
    width: 200px;
    height: 350px;
    border: 1px solid red;
    background-image: url(img/img_tree.png);
    background-repeat: no-repeat;
    background-attachment: local;
    overflow: scroll;
    line-height: 1.5;
}
</style>

    <p>
    1内容超出会出现滚动条
    2内容超出会出现滚动条
    3内容超出会出现滚动条
    4内容超出会出现滚动条
    5内容超出会出现滚动条
    6内容超出会出现滚动条
    7内容超出会出现滚动条
    8内容超出会出现滚动条
    9内容超出会出现滚动条
    10内容超出会出现滚动条
    11内容超出会出现滚动条
    12内容超出会出现滚动条
    13内容超出会出现滚动条
    14内容超出会出现滚动条
    15内容超出会出现滚动条
    16内容超出会出现滚动条
    17内容超出会出现滚动条
    18内容超出会出现滚动条
    19内容超出会出现滚动条
    20内容超出会出现滚动条
    </p>

3. 수정됨: [배경 이미지는 정지됨] 요소에 스크롤 막대가 있어도 배경 이미지는 뷰포트를 기준으로 고정됩니다.
고정 사용법은 다음과 같습니다:

<style>
body{
    background-image: url(img/cartooncat.png);
    background-position: bottom left;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 1000px;
}
</style>


    <h1 id="下拉看效果">下拉看效果：</h1>

또는 mozilla 데모를 살펴보세요.

여기서 내 의견 중 한 가지를 강조하고 싶습니다.

배경 첨부 설정: 모든 요소의 배경 이미지에 고정됩니다. 효과는 동일합니다. 웹 페이지에는 뷰포트가 하나만 있기 때문에 둘 다 뷰포트에 상대적입니다. , 배경과 요소는 더 이상 중요하지 않습니다. 중요한 것은 요소가 표시되지 않으면 배경 이미지도 표시되지 않는다는 것입니다.

그리고 이 뷰포트는 무엇인가요? 다음은 "픽셀 및 브라우저 뷰포트 세부 정보" 권장 기사입니다.

4. 여러 배경 이미지 배경 첨부 여러 배경 이미지에 대한 배경 첨부를 설정할 수도 있습니다.

body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
}

5. 리소스 링크

w3c 배경- attachment

픽셀 및 브라우저 뷰포트에 대한 세부정보

두 개의 뷰포트로 구성된 테이블

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. !

추천 도서:

CSS에서 배경 첨부 사용에 대한 자세한 설명

Bootstrap 가격 목록 구현

CSS에서 px, em 및 rem 사용에 대한 자세한 설명

위 내용은 CSS에서 배경 첨부의 고급 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!