CSS渐变只适合视口
在下一页中，如果视口高于CSS渐变只适合视口,css,Css,在下一页中，如果视口高于#container（600px），则正确渲染css渐变。但如果视口仅为400px，则底部200px（视口外部）缺少渐变 我怎样才能解决这个问题 <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Test-Site for css gradient</title> <style type="te
#container<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Test-Site for css gradient</title>
<style type="text/css">
body {
margin: 0;
}
html, body, #body-wrapper {
height: 100%
}
#body-wrapper {
background-repeat: no-repeat;
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(131,20,20,1)),
to(rgba(243,172,149,1)),
color-stop(0.2, rgba(159,19,24,1)),
color-stop(0.7, rgba(222,0,30,1))
);
background-image:
-webkit-linear-gradient(
top,
rgba(131,20,20,1),
rgba(159,19,24,1) 20%,
rgba(222,0,30,1) 70%,
rgba(243,172,149,1)
);
background-image:
-moz-linear-gradient(
top,
rgba(131,20,20,1),
rgba(159,19,24,1) 20%,
rgba(222,0,30,1) 70%,
rgba(243,172,149,1)
);
background-image:
-o-linear-gradient(
top,
rgba(131,20,20,1),
rgba(159,19,24,1) 20%,
rgba(222,0,30,1) 70%,
rgba(243,172,149,1)
);
background-image:
linear-gradient(
top,
rgba(131,20,20,1),
rgba(159,19,24,1) 20%,
rgba(222,0,30,1) 70%,
rgba(243,172,149,1)
);
}
#container {
max-width: 900px;
margin: 0 auto;
background: #fff;
border: 1px solid black;
height: 600px;
}
</style>
</head>
<body>
<div id="body-wrapper">
<div id="container">
</div>
</div>
</webl:context>
</body>
</html>
css梯度测试站点
身体{
保证金：0；
}
html，正文，#正文包装器{
身高：100%
}
#车身包装{
背景重复：无重复；
背景图像：-webkit渐变(
线性的
左上，左下，
来自（rgba（131,20,20,1）），
致（rgba（243172149,1）），
色差（0.2，rgba（159,19,24,1）），
彩色光圈（0.7，rgba（222,0,30,1））
);
背景图像：
-线性梯度(
顶部
rgba（131,20,20,1），
rgba（159,19,24,1）20%，
rgba（222,0,30,1）70%，
rgba（243172149,1）
);
背景图像：
-莫兹线性梯度(
顶部
rgba（131,20,20,1），
rgba（159,19,24,1）20%，
rgba（222,0,30,1）70%，
rgba（243172149,1）
);
背景图像：
-o-线性梯度(
顶部
rgba（131,20,20,1），
rgba（159,19,24,1）20%，
rgba（222,0,30,1）70%，
rgba（243172149,1）
);
背景图像：
线性梯度(
顶部
rgba（131,20,20,1），
rgba（159,19,24,1）20%，
rgba（222,0,30,1）70%，
rgba（243172149,1）
);
}
#容器{
最大宽度：900px；
保证金：0自动；
背景：#fff；
边框：1px纯黑；
高度：600px；
}
编辑：您可以在这里在线查看：必须在#容器中尝试此样式：
display:block;
overflow:hidden;
这是因为
高度：100%将
min height:600pxhtml，body，#body wrapper