html - 非常に多くのピクセルの後にcssグラデーションを停止させる方法は?

Question

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

上記のコードがあり、このグラデーションが上から下に行くことに気付きました。30px の後にグラデーション全体を停止させる方法はありますか。必要に応じて調整できますが、グラデーションが 30px 以降で完成するようにするにはどうすればよいですか?

Answer 1

background-size物件と合わせてご利用いただけます。

このような：

div {
    height: 100px;
    width: 100px;
    border: 1px solid black;

    background: radial-gradient(ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
    background-size: auto 30px;
    background-position: top;
}

<div></div>

Answer 2

css3 グラデーションは背景画像であるため、単色のように、ブロック要素の高さと幅全体を塗りつぶします。

グラデーションの高さを制限するには、要素の高さを制限します。これを行うための「クリーンな」方法は、疑似要素を使用することです。何かのようなもの...

div {height: 500px; width: 500px; position: relative}

div:before {
     content: " ";
     width: 100%;
     height: 30px;
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     display: block;
     background-image: [your-gradient-here]
}