gzo*_*ost 4 html css background-image linear-gradients css3
我想要一个背景渐变,例如
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9))
在我的文件的主体上,延伸到整个身体的高度 - 并与身体滚动.
运用
background-attachment: fixed;
我得到了(视口的)整个高度,但它保持固定.
background-attachment: scroll;
让我滚动,但它只是延伸到视口高度.
任何方式来获得两者？
编辑:
正如Boltclock指出的那样,我确实通过基本测试页面上的"background-attachment:scroll"得到了预期的行为.
同
<body>
<div id="stretch">Content</div>
</body>
和
body {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
}
#stretch {
height: 2000px;
}
一切正常:渐变遍布整个身体(身体高2000像素),并滚动内容.
然后我补充说
html,
body {
height: 100%;
}
这是页面所基于的基本模板所做的事情.
为了让身体再次扩张,我补充说
height: auto;
身体恢复到2000px的高度.
但是,渐变保持在HTML高度 - 然后重复.
我在这里错过了什么？
Bol*_*ock 11
发生这种情况的原因在于梯度背景的大小根据其容器(包括两者html和包括body)来确定,以及用于确定视口尺寸html和body相应视口的计算.
在回答另一个问题之前,我实际上已经写了类似的东西.你的有点不同,所以我先引用相关部分:
应用于和/或时,背景具有特殊行为.当您在不触摸的情况下应用背景时,会发生的事情是身体背景传播到视口,并且该背景的行为就像它在以下情况下声明一样:
bodyhtmlbodyhtmlhtml对于其根元素是HTML
HTML元素或XHTMLhtml元素的文档:如果根元素上的"background-image"的计算值为"none"且其"background-color"为"transparent",则用户代理必须传播从该元素的第一个HTMLBODY或XHTMLbody子元素计算背景属性的值.该BODY元素的背景属性的已使用值是它们的初始值,并且传播的值被视为在根元素上指定它们.
在你的情况,如果您使用的是没有指定任何背景模板html或body,那么这样的背景下传播行为是什么原因造成的梯度采取的高度html,而不是body.
要解决此问题,您需要仅重置元素的height值html,并指定min-height:
html {
height: auto;
min-height: 100%;
}
这将删除html元素的高度约束,允许渐变与页面内容一起拉伸,同时如果页面没有足够的内容(如果这不重要,则不要保持它至少与视口一样高)需要设置min-height).
| 归档时间： |
|
| 查看次数： |
2501 次 |
| 最近记录： |