html - div のグラデーションの下の色

Question

div のグラデーションの下部の色が必要でした。下の画像に示すようなものです。css3 で可能ですか、または画像を使用する必要がありますか。

任意の助けが必要です。

Answer 1

はいといいえ。

はい、可能です。http://www.colorzilla.com/gradient-editor/などのツールを使用すると、CSS3 コードを簡単に作成できます。たとえば、これはあなたが望んでいたものです: http://www.colorzilla.com/gradient-editor/#ffffff+75,cccccc+100;Custom

いいえ、常にグラデーション用のフォールバック イメージが必要です。すべてのブラウザーがそれをサポートしているわけではなく、すべてが同等にサポートしているわけでもありません。

Answer 2

これにより、要素の下部にのみグラデーションが作成され、要素の高さには伸びません。固定されてい100pxます。

.style {
    padding-bottom:100px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: center bottom;
    background-size: 100px 100px;
    background-repeat: repeat-x;
}