Question

我正在尝试添加css径向渐变作为我的网页的背景，当我添加html5 doctype <!DOCTYPE html>时，径向背景变为（横向）条纹。我的css径向渐变代码是否有错误，为什么它与HTML5不兼容

输出：

使用html5 doctype <!DOCTYPE html>

没有html5 doctype

我的代码（没有html5 doctype）：

HTML

<!-- <!DOCTYPE html> --> 
<!-- header -->
<body>

<div class="content"></div>

</body>

CSS

    body {
    background: rgba(32,61,227,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(32,61,227,1)), color-stop(100%, rgba(10,38,69,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    background: radial-gradient(ellipse at center, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#203de3', endColorstr='#0a2645', GradientType=1 );
    }

Answer 1

添加<!DOCTYPE HTML>似乎可以最小化html和body到0%的高度

尝试将此添加到 CSS

html, body {
    height: 100%;
}

这将解决您的问题

为什么CSS Radial Gradient与html5不兼容

1 个答案: