web-dev-qa-db-ja.com

グラデーションの背景を持つ純粋なCSS divを作成する方法は？

Divの高さが34px、幅が480pxだとします。 divは次のようになります。

alt text

そして、CSSだけで画像を実際に使用したくありません。出来ますか？

csshtmlgradient
24
AngryHacker

CSS3を使用しています。 便利なグラディエントジェネレータ もあり、当て推量を排除します。もちろん、これはIE8以前では完全にサポートされていません。

編集

sluukkonen が述べたように、完全を期すために、IEはフィルター filter:progid:DXImageTransform.Microsoft.Gradient 。

23
user113292

CSS3で可能です。

例：（黒とグレー）

mydiv
{

   background-image:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.15, rgb(189,189,189)),
        color-stop(0.58, rgb(0,0,0)),
        color-stop(0.79, rgb(0,0,0))
    )
    -moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 15%,
        rgb(0,0,0) 58%,
        rgb(0,0,0) 79%
    )
}

ただし、これはMozillaおよびwebkitブラウザーでのみ機能し、IE8以下ではこれは無視されます。

それが役に立てば幸い ：）

3
Kyle

-webkit-gradientの値として-moz-linear-gradientおよびbackground-image '関数'を使用してこれを行う方法があります。これらは異なる構文を使用しますが、勾配仕様がCSS 3の最終リリースに含める場合は標準化されます。

/ * webkitの例*/
 background-image：-webkit-gradient（
 linear、left top、left bottom、from（rgba（50,50,50,0.8））、
 to（rgba（80,80,80,0.2））、color-stop（.5、＃333333）
）;
/ * mozillaの例-FF3.6 + */
 background-image：-moz-linear-gradient（
 rgba（255、255、255、0.7）0％、rgba（255、255 、255、0）95％
）;
2
Delan Azabani