我在插入背景图像和使页眉和页 footer 分具有渐变背景时遇到问题。我的背景图片必须重复。 .gif 图片是否必须与 css 位于同一文件夹中?这是它的 CSS。
body {
background-image: url("folder1/pic.gif");
background-repeat: repeat-x repeat-y;
}
我还在研究从白色到橙色再到黑色的线性渐变。然后,此渐变将成为页眉和页 footer 分的背景。我能够拆分并为页眉和页 footer 分提供线性渐变背景,但它不会一直延伸到页眉和页脚的边框。这是标题的 html 部分
<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%);
}
最佳答案
正如您在 this example 中看到的那样渐变显示良好,背景图像也显示。
注意:在某些浏览器上,由于浏览器版本或语法的原因,渐变可能不会出现。
所以我使用了渐变的所有前缀来支持尽可能多的兄弟:
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
关于html - 渐变边框不填充页眉和页 footer 分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39755427/