代码之家 › 专栏 › 技术社区 › Rich Bradshaw

css:除非页面滚动,否则将背景渐变设置为100%精细

css html

Rich Bradshaw · 技术社区 · 15 年前

这里有两个屏幕截图,用一个必须滚动的小视窗显示效果。

alt text

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中不起作用-那里有一个背景图像来模拟行为。它也有同样的问题。)

4 回复 | 直到 12 年前

Rich Bradshaw 12 年前

好吧,对于那些发现这个问题却无法解决的人,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;
}

两年后编辑-渐变语法有了一些改变,现在每个人都支持它。在使用此代码之前,请确保阅读了更改。

Pekka 15 年前

这是为了 position: absolute ,其坐标相对于视口在渲染时。

可能有一个解决方法可以保留 grad1 div,但为什么不简单地将背景图像/渐变放到身体中呢?从我所看到的,背景是无论如何要扩展到整个文档。

Greg 13 年前

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;
}

附加。渐变到主体标签或容器分区。

-1

PauliL 12 年前

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

在所有浏览器上工作的渐变背景只需使用背景图像即可。

创建一个狭窄(甚至一个像素宽)的梯度图像。
在css中,设置背景图像在x方向而不是y方向重复
将主体背景颜色设置为与图像底部的颜色相同。

这里是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;
}