Parallax網站上的固定文字

Question

我創建了this site，並試圖在第一張幻燈片（使用耐克籃球的那張幻燈片）上實現固定文字。目前，我有作爲背景圖像的一部分的文字'第一類'。是否有可能將它從背景中分離出來並將文本放置在它自己的div中？

由於第一張幻燈片是使用三個獨立的div創建的，所以我非常想念 - 一個用於球的頂部，第二個用於球的底部，第三個用於放大球。我想在第一個和第二個div中附加文本，但是它會導致文本與頁面一起滾動，反對將其固定到位。

網站鏈接：http://www.sfu.ca/~jca41/stuph/parallaxTest/parallax03/parallax03.html

Answer 1

是，使用position:fixed與left和top CSS屬性。

例如

#fixedText { 
    position:fixed; 
    left:100px; 
    top:50px; 
} 

編輯：

爲了適應幻燈片的重疊，你就必須一個z-index應用於幻燈片和文本。

例如，你可以給網頁類的2的z-index（和位置：相對或z指數不生效），該#fixedText規則1的z-index和#first排除0的z-index這將創建分層你是後：

#fixedText { 
    position: fixed; 
    left: 75px; 
    top: 120px; 
    font-size: 35pt; 
    color: white; 
    z-index: 1; 
    font-family: helvetica; 
    } 

    #first { 
    background: url(images/01.jpg) no-repeat fixed; 
    height: 1000px; 
    z-index: 0; 
    } 

    .page { 
    margin: 0; 
    padding: 0; 
    overflow: auto; 
    width: 100%; 
    z-index: 1; 
    position: relative; 
    }