固定標題在梯度體（移動網頁）

Question

我想知道如何在具有漸變背景（帶有可滾動內容）的主體上有固定標題。我不想爲標題設置背景顏色，因爲它會弄亂頁面外觀，因爲我希望以全尺寸顯示主體背景。

我使用body標籤漸變背景，這樣的事情：

body { 
background:radial-gradient(ellipse at center, rgba(89,72,97,1) 0%, rgba(57,46,63,1) 100%); 
} 

而且我有一個棘手的標題：

.header { 
    line-height: 45px; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
} 

而且還滾動內容：

.content-wrapper { 
    height: 100%; 
    text-align: center; 
    width: 100%; 
} 
.content-wrapper .content-wrapper-inner { 
    height: 100%; 
    overflow: auto; 
} 

我知道我可以設置padding-top爲.content-wrapper，但它在我的行爲並不好操作系統，當在不同的方向查看等等。 另外我想避免position:fixed，因爲它在iOS的Safari中也不能正常工作。當您嘗試滾動整個頁面時，身體的背景會被拖動，但標題會保留原位，且背景顏色爲空白。

抱歉沒有Jsfiddle/Codepen因爲我無法設置徑向漸變背景。

Answer 1

如果你想有頁眉下方的內容，而頭部是fixed，那麼你可以嘗試以下方法解決：

1偏移量

添加margin-top內容等於報頭的高度（×45像素）：

.content-wrapper { 
    ⋮ 
    margin-top: 45px; 
} 

的jsfiddle：https://jsfiddle.net/azizn/xj8qg5mj/

*這也適用於填料，位置等頂

---

2.要使頭繼承體背景

.header { 
    ⋮ 
    background: inherit; 
    background-attachment: fixed; 
} 

的jsfiddle：https://jsfiddle.net/azizn/ga7ndq8c/

的fixed背景附件確保漸變不會停在標題的高度，而是表現得好像在身上設置一樣，請參見區別：

更新：因爲需要在Android爲Chrome的支持，可以使用代替的替代方法：僞元件（::before）報頭的獲取的背景和具有高度等於視口的100％（100vh）

.header { 
    ⋮ 
    background: inherit; 
} 

.header::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: inherit; 
    height: 100vh; 
    z-index:-1; 
} 

的jsfiddle：https://jsfiddle.net/azizn/ejg6sdmw/

---

3。擺脫固定位置的

你也許可以達到同樣的效果，如果你保持靜態位置的頭和有內容的包裝填充剩餘的視口空間，同時其內容被滾動：

html, body { 
 
    margin: 0; padding: 0; 
 
    height: 100%; color: #FFF; 
 
} 
 

 
body { 
 
    background: radial-gradient(ellipse at center, rgba(89, 72, 97, 1) 0%, rgba(57, 46, 63, 1) 100%); 
 
    text-align: center; 
 
} 
 

 
.header { line-height: 45px; } 
 

 
.content-wrapper { height: calc(100% - 45px); } 
 

 
.content-wrapper .content-wrapper-inner { height: 100%; overflow: auto; } 
 

 
.long { 
 
    border: 1px dashed #CCC; 
 
    padding: 1em; 
 
    margin: 1em; 
 
    min-height: 600px; 
 
}

<div class="header">header</div> 
 

 
<div class="content-wrapper"> 
 
    <div class="content-wrapper-inner"> 
 
    <div class="long"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nemo repudiandae alias iure minima officiis eligendi minus dignissimos. Dolore eos, assumenda voluptatibus quidem sequi architecto suscipit. Doloremque, illo modi totam.</p> 
 
     <p>Laborum reprehenderit deserunt tempora et minima animi atque libero aliquam, nesciunt perferendis omnis ipsam nostrum impedit quia neque adipisci amet quis corporis assumenda! Eveniet fugit quo pariatur officia et totam.</p> 
 
    </div> 
 
    </div> 
 
</div>

這似乎是最簡單直接的解決方案。

jsFiddle：https://jsfiddle.net/azizn/uwuL51zg/