为什么CSS Radial Gradient与html5不兼容

问题描述 投票：2回答：1

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

输出：

用html5 doctype <!DOCTYPE html>

enter image description here

没有html5 doctype enter image description here

我的代码（没有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 );
    }
html css html5
1个回答
6
投票

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

尝试将此添加到您的CSS

html, body {
    height: 100%;
}

这将解决您的问题

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.