扩展背景梯度横跨body没有background-attachment：fixed [英] Extend background gradient across body without background-attachment: fixed
问题描述
我想要一个背景渐变，例如
background：linear-gradient（to bottom，rgba（0，0，0，0.3），rgba（2， 174，0.9））
在我的文档的身体上，
background-attachment：固定;
我获得了视口的整个高度， p>
background-attachment：scroll;
让我滚动，但是它只是扩展到视口高度。
以任何方式获得两者？
编辑：
$ b b
正如Boltclock指出的那样，我在基本测试页面上得到了background-attachment：scroll的预期行为。
使用
< body>
< div id =stretch>内容< / div>
< / body>
和
body {
background：linear-gradient（to bottom，rgba（0，0，0，0.3），rgba（2，126，174，
}
#stretch {
height：2000px;
}
一切正常：渐变横跨整个身体
然后我添加
html，
body {
height：100％;
}
这是页面所基于的基本模板。
为了让正文再次展开，我添加
height：auto;
，主体回到2000px高度。
但是，渐变仍然保留在HTML高度 - 然后重复。
发生这种情况是因为渐变背景根据容器的大小而变化（包括 html 和 body ），以及用于确定 html body 。
我实际上写了一些类似于另一个问题。您的选项有所不同，因此我先引用相关部分：
根元素是HTML
HTML元素或XHTMLhtml元素：如果计算的'background-image'值根元素为none，其background-color为transparent，用户代理必须从该元素的第一个HTMLBODY中传播背景属性的计算值，或XHTMLbody子元素。BODY元素的背景属性的使用值是其初始值，传播的值被视为在根元素上指定。
在您的情况下，如果您使用的模板没有为 html指定任何背景或 body ，则此背景传播行为是导致渐变的高度 html
要修复此问题，您需要重置 height 元素的值，并分配 min-height ：
html {
height：auto;
min-height：100％;
}
这会删除 html 元素，允许渐变与您的页面的内容一起，同时保持它至少与视口一样高，如果页面没有足够的内容（如果这不重要，你不需要设置 min-height ）。
I want to have a background gradient, e.g.
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9))
on the body of my document which extends across the entire height of the body - and scrolls with the body.
Using
background-attachment: fixed;
I get the entire height (of the viewport), but it, well, stays fixed.
background-attachment: scroll;
gets me the scrolling, but then it just extends across the viewport height.
Any way to get both?
Edit:
As Boltclock pointed out, I do get the expected behavior with 'background-attachment: scroll' on a basic test page.
With
<body>
<div id="stretch">Content</div>
</body>
and
body {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(2, 126, 174, 0.9));
}
#stretch {
height: 2000px;
}
everything works fine: The gradient extends across the entire body (and the body is 2000px tall), and scrolls with the content.
Then I add
html,
body {
height: 100%;
}
This is something which the basic template the page is based on does.
In order to get the body to expand again, I add
height: auto;
and the body is back to 2000px height.
However, the gradient remains at the HTML height - and repeats then.
What am I missing here?
This happens because of the way gradient backgrounds are sized according to their containers (this includes both html and body), as well as the calculations used in determining the dimensions of html and body respective to the viewport.
I've actually written about something similar before in an answer to another question. Yours is a little different, so I'll quote the relevant portion first:
Backgrounds have special behavior when applied to
bodyand/orhtml. When you apply a background tobodywithout touchinghtml, what happens is that the body background gets propagated to the viewport, and that background acts as if it were declared onhtml:For documents whose root element is an HTML
HTMLelement or an XHTMLhtmlelement: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTMLBODYor XHTMLbodychild element. The used values of thatBODYelement's background properties are their initial values, and the propagated values are treated as if they were specified on the root element.
In your case, if the template that you're using doesn't specify any backgrounds for html or body, then this background propagating behavior is what causes the gradient to take the height of html instead of body.
To fix this you need to reset the height value for the html element only, and assign min-height instead:
html {
height: auto;
min-height: 100%;
}
This removes the height constraint on the html element, allowing the gradient to stretch along with the contents of your page, while keeping it at least as tall as the viewport if the page doesn't have enough content (if that's not important, you don't need to set min-height).
这篇关于扩展背景梯度横跨body没有background-attachment：fixed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
