漸變邊框不填充頁眉和頁腳部分

我遇到了插入背景圖像並使頁眉和頁腳部分具有漸變背景的問題。我的背景圖片必須重複。 .gif圖片是否必須與css位於同一個文件夾中？這是它的CSS。漸變邊框不填充頁眉和頁腳部分

body { 
    background-image: url("folder1/pic.gif"); 
    background-repeat: repeat-x repeat-y; 
}

我也在研究從白色到橙色到黑色的線性漸變。這個漸變將成爲頁眉和頁腳部分的背景。我能夠分割並提供頁眉和頁腳部分的線性漸變背景，但它不會一直延伸到頁眉和頁腳的邊框。這是首部

<header> 
    <div id="eg1"> 
     <img src="images/pumpkin.gif" alt= "pumpkin" height="78" width="85"> 
     <h1>The Halloween Store</h1> 
     <h3>For the little Goblin in all of us!</h3> 
    </div> 
</header>

的CSS格式的HTML我爲

/*gradient header*/ 
#eg1 { 
    background-image: -webkit-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%); 
}

來源

2016-09-28 zwggins10

的HTML段正如你可以看到this example梯度顯示精細和背景圖像也顯示。

請注意：在某些瀏覽器上，由於瀏覽器版本或語法不同，漸變可能不會顯示。

所以我用所有的前綴儘可能支持梯度要儘可能多brosers：

background-image: linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%); 
    background-image: -webkit-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%); 
    background-image: -moz-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%); 
    background-image: -o-linear-gradient(45deg, white 0%, #ffa500 75%, #000000 100%);

有關瀏覽器支持的檢查更多的this

來源

2016-09-28 18:59:54

漸變邊框不填充頁眉和頁腳部分

回答

相關問題