•  26-06-2022
  •  | 
  •  

質問

After i changed the doctype to html5 the background gradient messes up and looks like this: Messy

if i remove it again it becomes a smooth gradient again.

My CSS code is the following:

body {
background: #3c99d4;
background: -moz-radial-gradient(center, ellipse cover,  #81e8f9 0%, #0358b5 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#81e8f9), color-stop(100%,#0358b5));
background: -webkit-radial-gradient(center, ellipse cover,  #81e8f9 0%,#0358b5 100%);
background: -o-radial-gradient(center, ellipse cover,  #81e8f9 0%,#0358b5 100%);
background: -ms-radial-gradient(center, ellipse cover,  #81e8f9 0%,#0358b5 100%);
background: radial-gradient(ellipse at center,  #81e8f9 0%,#0358b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81e8f9', endColorstr='#0358b5',GradientType=1 );}
役に立ちましたか？

解決

Try adding a height to both the <html> and <body> elements if you'd like the gradient to fill the viewport:

html, body {
  height: 100%;
}

Example: http://jsfiddle.net/xZKPJ/3/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top