JD *_*cks 410 css gradient css3
好吧说内容<body>总计300px高.
如果我设置我的<body>使用-webkit-gradient或背景-moz-linear-gradient
然后我最大化我的窗口(或者只是让它高于300px)渐变将正好是300px高(内容的高度),并重复填充窗口的其余部分.
我假设这不是一个bug,因为它在webkit和gecko中是相同的.
但有没有办法让渐变拉伸填充窗口而不是重复？
Bry*_*ing 681
应用以下CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
编辑:添加margin: 0;到每个评论的正文声明(马丁).
编辑:添加background-attachment: fixed;到每个评论的身体声明(Johe Green).
小智 158
关于前面的回答,设置html和body对height: 100%似乎并不如果内容需要滚动工作.添加fixed到背景似乎解决了 - 没有need for height: 100%;
例如:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}小智 15
这就是我为解决这个问题所做的工作......它将显示内容全长的渐变,然后简单地回退到背景颜色(通常是渐变中的最后一种颜色).
html {
background: #cbccc8;
}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
}<body>
<h1>Hello world!</h1>
</body>我在FireFox 3.6,Safari 4和Chrome中对此进行了测试,我将背景颜色保留在体内,适用于任何因某些原因不支持HTML标记样式的浏览器.
Jus*_*rce 13
设置html { height: 100%}会对IE造成严重破坏.这是一个例子(png).但你知道什么效果很好吗？只需在<html>标签上设置背景即可.
html {
-moz-linear-gradient(top, #fff, #000);
/* etc. */
}
背景延伸到底部,并且不会发生奇怪的滚动行为.您可以跳过所有其他修复程序.这得到了广泛的支持.我没有找到一个不允许你将背景应用于html标签的浏览器.它是完全有效的CSS并且已经有一段时间了.:)
Ric*_*Zea 13
我知道我迟到了,但这是一个更加坚定的答案.
您需要做的就是使用min-height: 100%;而不是height: 100%;渐变背景将扩展视口的整个高度而不重复,即使内容是可滚动的.
像这样:
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}
Ric*_*ith 12
此页面上有很多部分信息,但不完整.这是我做的:
<DIV id='container'>我将所有内容都放入其中的内容这是一个例子:
html {
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
background-attachment: fixed;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
/* OPTIONAL: div to store content. Many of these attributes should be changed to suit your needs */
#container
{
width: 800px;
margin: auto;
background-color: white;
border: 1px solid gray;
border-top: none;
border-bottom: none;
box-shadow: 3px 0px 20px #333;
padding: 10px;
}
这已经在各种尺寸和滚动需求的页面上使用IE,Chrome和Firefox进行了测试.
小智 7
添加一个空格并将单词固定到末尾就足够了。无需设置高度。
body{
background: linear-gradient(#e4efe9,#93a5cf) fixed;
}