CSS：将背景渐变设置为宽度100％，除非页面滚动

Question

CSS：将背景渐变设置为宽度100％，除非页面滚动

4

这里有两张屏幕截图，展示了在必须滚动的小视口下的效果。

HTML代码如下：（忽略head和html标签）

<body>
 <div id="grad1"></div>
 <div id="wrapper">
 <header>
  <h1 class="logo"><a href="/">Business Name</a></h1>
 </header> 
 <nav>
  <ul>
   <li><a class="first" id="index" href="/index.php">Home</a></li>
   <li><a  id="whatwedo" href="/whatwedo.php">What we do</a></li>
   <li><a  id="communicating" href="/communicating.php">Communicating</a></li>
   <li><a class="last" id="contact" href="/contact.php">Contact Us</a></li>
  </ul>
 </nav>
 <div style="clear:both;"></div>
 <section>
  <?= $content ?>
 </section>
 <footer>
  &copy; 2010
 </footer>
 </div> 
</body>

以下是与 body、grad1 和 wrapper 相关的（精简版）CSS：

body {
 color: #111;
 background-color: #3E9C9D;
}

#grad1 {
 height: 600px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
 width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
    background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
}


#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

我该如何解决这个问题？据我所知，我需要将渐变放在另一个div上，因为我需要指定高度。

（我知道CSS渐变在IE中不起作用 - 这里有一个背景图片来模拟这种行为。它也有同样的问题。）

- Rich Bradshaw

创建特定于浏览器的网页是一个非常糟糕的想法，你应该坚持遵守标准。 - PauliL

首先，我在2年前就提出了这个问题，当时这种语法是全新的，因此缺乏供应商。其次，它是标准的：http://dev.w3.org/csswg/css3-images/#linear-gradients。第三，对于旧版浏览器，我使用我开发的这种技术：http://www.bradshawenterprises.com/blog/2010/dynamically-drawing-gradients-with-php/ 来生成png。使用这种技术可以显著减少加载时间，并且一旦IE10发布，它可以在所有浏览器中运行。 - Rich Bradshaw

-webkit-和-moz-不是标准，也永远不会成为标准。你两年前就不应该使用它们，就像你不应该使用供应商可能开发的任何新的浏览器特定功能一样。
CSS3的实现与此处提供的解决方案无关。
使用非标准渐变并不能减少加载时间。你没有理解到，一个窄的渐变图像非常小。
即使IE10发布了，新技术也不被所有浏览器支持。大多数人使用的旧浏览器也不支持它。例如，在Windows XP上，IE8是最新的可用版本。

- PauliL

使用CSS渐变可以替换掉一个HTTP请求和207字节的PNG，用大约74字节的gzipped CSS。我知道这不算多，但下载大小减少了一半左右。两种技术的渲染时间大致相同。当然，这个网站没有很多渐变，但对于其他网站来说，差异更为显著。正如我所说，我在旧浏览器中使用PNG，因此无论是通过PNG还是CSS都可以在任何地方使用。上面的代码只是一个片段。大多数人都不使用旧浏览器。 - Rich Bradshaw

使用我编写的分析软件包，在过去一个月中，大约50,000名用户中有65%的用户可以使用CSS渐变效果。如果当前趋势保持不变，一年后应该会有3/4的用户可以使用。 - Rich Bradshaw

4个回答

1

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}

.gradient {
background: linear-gradient(top, #243d6e 0%,#031b4d 61%,#011132 100%); /* W3C */
background-repeat: no-repeat;
background-attachment: fixed;
}

请将.gradient附加到body标签或容器div。

- Greg

1

这是 position: absolute 的预期行为，其坐标相对于渲染时的视口。

可能存在一种解决方法，可以保留 grad1 DIV，但为什么不将背景图像/渐变放入 body 中呢？从我所看到的情况来看，背景应该跨越整个文档。

- Pekka

啊，这很有道理。我没有这样做是因为我必须为具有渐变的元素指定高度（否则绘制的渐变在每个页面上具有不同的高度）... - Rich Bradshaw

@Rich 我明白了。从我查看的渐变文档中，你应该能够设置background-size来固定渐变的高度（虽然我以前没有使用过渐变，但是看起来是这样的）。 - Pekka

是的，我刚刚在研究这个问题，发现了同样的情况。它确实可以工作，但渐变会重复出现。在背景图像上设置no-repeat会导致其停止呈现，而设置repeat-y则没有任何效果！:( - Rich Bradshaw

-1

创建特定于浏览器的网页不是一个好主意。

可以通过使用背景图片简单地制作适用于所有浏览器的渐变背景。

创建一个窄的（甚至只有一个像素宽）带有渐变的图像。
在 CSS 中，设置背景图像在 x 方向上重复但不在 y 方向上重复。
将 body 背景颜色设置为与图像底部颜色相同的颜色。

以下是 CSS 代码：

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: URL(gradient_green.png);
 background-repeat:repeat-x;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

- PauliL

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rich Bradshaw · Accepted Answer

好的，对于那些找到这篇文章但无法理解的人，CSS应该如下所示：

body {
 color: #111;
 background-color: #3E9C9D;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
 background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
 background-repeat:repeat-x;
 background-size: 100% 600px;
 -o-background-size: 100% 600px;
 -moz-background-size: 100% 600px;
 -webkit-background-size: 100% 600px;
}

#wrapper {
 max-width:960px;
 min-width:840px;
 margin: 0 auto;
}

更新于2年后 - 渐变语法有了一些改变，现在所有人都支持它。在使用此代码之前，请确保您已经阅读了相关的更改。