グラデーションの設定をするためには、webkit系(chrome,oprera系ブラウザ用)とMozila系(Firefox等)の両方の設定をしておく必要があります。
webkit系グラデーション(chrome,oprera系ブラウザ用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
background-image:-webkit-gradient( グラデーションの方向 , 開始位置 , 終了位置 , from(開始色) , color-stop(位置, 途中色) , to(終了色)); background-image: -webkit-gradient( linear , left top , left bottom , from(#b2b2ed) , color-stop(0.49, #5050a5) , color-stop(0.50, #1c1c60) , to(#050519)); |
Mozila系グラデーションFirefox用)
1 2 3 4 5 6 7 8 9 10 11 12 |
background-image: -moz-linear-gradient( 開始位置と角度 , 開始色 領域(%) , 途中色 領域(%) , 途中色 領域(%) , 終了色); background-image: -moz-linear-gradient( top , #b2b2ed 0% , #5050a5 49% , #1c1c60 50% , #050519); |