Question

为什么在此处找到径向渐变代码： generated gradient

body {
    background: rgba(216,215,221,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(enter code here216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(216,215,221,1)), color-stop(100%, rgba(0,9,20,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: radial-gradient(ellipse at center, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d7dd', endColorstr='#000914', GradientType=1 );
}

像这里看到的条纹出来： codepen of generated gradient

Answer 1

你会觉得很奇怪，因为默认情况下，body元素不是全高。这解决了它：

＆＃13;

html, body {
  min-height: 100%;
}

body {
background: rgba(216,215,221,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(216,215,221,1)), color-stop(100%, rgba(0,9,20,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
background: radial-gradient(ellipse at center, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d7dd', endColorstr='#000914', GradientType=1 );
}

＆＃13;

Answer 2

当你将“body”放在前面时，它就像每行文字一样，是渐变开始的地方。将你的css中的“body”改为“.this”，然后把它放在div类中，你会看到渐变。

.this {
    background: rgba(216,215,221,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(enter code here216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(216,215,221,1)), color-stop(100%, rgba(0,9,20,1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    background: radial-gradient(ellipse at center, rgba(216,215,221,1) 0%, rgba(0,9,20,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d7dd', endColorstr='#000914', GradientType=1 );
}

<div class="this">hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>hkhkj<br>
</div>

为什么这个径向渐变出现条纹？

2 个答案: