CSS background-attachment 속성의 사용 및 정의-CSS 튜토리얼-php.cn

CSS background-attachment 속성의 사용 및 정의

黄舟

풀어 주다： 2017-06-21 11:17:02

원래의

2326명이 탐색했습니다.

ground-attachment - 배경 이미지가 스크롤 축과 함께 이동하는 방식을 정의합니다.

값: 스크롤 | 고정 | 상속

scroll: 페이지 스크롤에 따라 배경 이미지가 이동합니다.

고정: 페이지 스크롤에 따라 축 배경 이미지는 이동되지 않습니다.

inherit: 상속

초기 값: 스크롤

inheritance: no

적용 대상: 모든 요소

배경: background.attachment: 첨부 파일

예

body 
{	
background-image:url(&#39;list-orange.png&#39;);	
background-attachment:fixed;	
background-repeat:repeat-x;	
background-position:center center;
}

로그인 후 복사

화면 배경. 이미지는 주황색 선입니다. 스크롤 축이 이동함에 따라 주황색 선의 시각적 위치는 변경되지 않습니다.

CSS 배경 첨부 속성 예--

CSS 배경 첨부 속성 예

시차 스크롤을 시도해 볼 수 있습니다. (시차 스크롤링)은 여러 레이어의 배경을 서로 다른 속도로 움직여 3차원 모션 효과를 형성하고 뛰어난 시각적 경험을 제공하는 것을 말합니다. 올해 웹 디자인의 뜨거운 트렌드로, 점점 더 많은 웹사이트가 이 기술을 적용했습니다.

이해가 되지 않는다면 먼저 eBay에 미치는 영향을 살펴보세요: http://www.ebay.com/new/

사실, 배경을 수정하고 움직이지 않게 하는 것입니다. 하지만 배경을 포함하는 컨테이너는 함께 스크롤되므로 결과적인 시각적 차이는 장면 전환과 동일하게 나타납니다. (이 설명을 너무 혼란스럽게 하지 마십시오...)

CSS에서 배경 스크롤 방법을 정의하는 속성은 background-attachment

background-attachment - 배경 이미지가 스크롤 축과 함께 이동하는 방식을 정의합니다

값 : 스크롤 | 고정 | 상속

스크롤: 기본값. 배경 이미지는 페이지의 나머지 부분이 스크롤됨에 따라 움직입니다.

수정됨: 페이지의 나머지 부분을 스크롤할 때 배경 이미지가 움직이지 않습니다.

inherit: background-attachment 속성의 설정이 상위 요소에서 상속되도록 지정합니다.

초기값: 스크롤

상속: No

적용 대상: 모든 요소

브라우저 지원:

테스트한 크롬, 오페라, 사파리, 파이어폭스, ie7-8 모두 괜찮으니 그렇다고 하네요. IE6에서는 작동하지 않습니다~

IE6에서 이 속성을 사용하려면 body나 html에 background-attachment:fixed를 넣어야 하는데, 이는 다른 태그에서는 쓸모가 없다는 뜻입니다. 위의 w3c에서 볼 수 있는 효과는 바디에 배치되기 때문입니다.

이것은 제가 직접 만든 데모입니다. 다운로드하려면 클릭하세요.

코드:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img src="5.jpg">
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg">
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>

로그인 후 복사

위 내용은 CSS background-attachment 속성의 사용 및 정의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!