渐变边框不填充页眉和页脚部分

我遇到了插入背景图像并使页眉和页脚部分具有渐变背景的问题。我的背景图片必须重复。 .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

渐变边框不填充页眉和页脚部分

回答

相关问题