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

【问题标题】：Gradient border doesn't fill header and footer section渐变边框不填充页眉和页脚部分
【发布时间】：2016-09-28 18:47:52
【问题描述】：

我在插入背景图像并使页眉和页脚部分具有渐变背景时遇到问题。我的背景图片必须重复。 .gif 图片是否必须与 css 位于同一文件夹中？这是它的 css。

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

我还在研究从白色到橙色到黑色的线性渐变。然后，此渐变将成为页眉和页脚部分的背景。我能够拆分并为页眉和页脚部分提供线性渐变背景，但它不会一直延伸到我的页眉和页脚的边界。这是标题的 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>

我拥有的 html 格式的 css

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

【问题讨论】：

标签： html css background-image linear-gradients background-repeat

【解决方案1】：

正如您在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

【讨论】：