怎样实现全屏的渐变

怎样才能实现类似body{background-color：#xxx；}这样的全屏效果啊，，

itstimetosail 2019-02-20

源自：CSS3转换 6-7 作业题

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2019-02-21 18:47:30

1、如果body中没有内容，那么body是没有高度的，如果只给body设置高度为100%是不可以实现全屏的，因为body外层还有html标签，需要先给html标签设置高度为100%，那么body标签才会参照html高度，然后设置高度为100%全屏才会生效。

2、这边重新使用Chrome测试了一下，确实是可以实现渐变的，可以测试下面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgb(196, 228, 253) 0%, rgb(255, 255, 255) 60%, rgb(148, 190, 89) 100%);
}
</style>
</head>

<body>

</body>

</html>

收起回答

好帮手慕星星 2019-02-21 09:42:01

你好，将你的代码替换掉，使用Chrome浏览器测试是有渐变效果的哦：

效果：

建议再测试一下。

收起回答

提问者 itstimetosail #1

呃，，，不行，，这个真的很困惑了，，，①高度设置百分比，比的是它的容器，那body已经是内容最外层的容器了，那设置height：100%又有什么意义？②body的高度是靠内容撑起来的，所以如果不给内容设置高度body是没有高度的吧？③我注意到在body里面没有内容的情况下，给body设置background-color是有用的，实现了全屏背景色的效果，但是linear-gradient是无效的，除非给body设置固定高度，但是设置固定高度就无法实现全屏效果，，④我使用的是chrome浏览器。

2019-02-21 16:48:27

好帮手慕星星 2019-02-20 19:13:31

你好，全屏效果可以给body设置百分比，参考：

把背景颜色换成渐变的颜色就可以。

自己动手写一写，祝学习愉快！

收起回答

提问者 itstimetosail #1

换成 background:linear-gradient(180deg,rgb(196,228,253) 0%,rgb(255,255,255) 60%,rgb(148,190,89) 100%); 是无法实现渐变效果的呀，，，

2019-02-20 19:52:50