CSS HTML只有灰色的矩形與偏色

我試圖創建下面的灰色（真的想要灰色的深淺這些）圖像進行CSS &僅HTML的：CSS HTML只有灰色的矩形與偏色

enter image description here

你可以看到如何grep顏色在底部較強，在頂部和中部較淡。

這裏是將圖像的鏈接： http://www.content.dating/online-dating/dating-website/navigation-background.png

這裏就是我一直在嘗試小提琴：

http://jsfiddle.net/m0hbty67/3/

目前的顏色是錯誤的，褪色的是怎麼回事錯誤的方向 - 仍在嘗試。

任何幫助將不勝感激。

三江源

基本守則：

<div id="navBackGround"></div> 

#navBackGround { 
    background-color: grey; 
    width: 160px; 
    height: 690px; 

    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 

    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */ 
}

來源

2014-11-01 Adam

爲什麼，如果你使用'RGBA（255,0,0,0）你認爲灰色'和'RGBA（ 255,0,0,1）'（即從透明紅到不透明紅）？ – Oriol 2014-11-01 22:30:19

http://www.colorzilla.com/gradient-editor/#f3f3f4+0,f3f3f4+71,dfe0e1+87,d3d4d6+100;Custom從圖像導入 - 很棒的功能。 :) – sinisake 2014-11-01 22:32:48

http://www.w3schools.com/css/css3_gradients.asp – 2014-11-01 22:34:05

DEMO

background: rgb(243,243,244); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(243,243,244,1) 0%, rgba(213,214,215,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,244,1)), color-stop(100%,rgba(213,214,215,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(243,243,244,1) 0%,rgba(213,214,215,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(243,243,244,1) 0%,rgba(213,214,215,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(243,243,244,1) 0%,rgba(213,214,215,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(243,243,244,1) 0%,rgba(213,214,215,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f4', endColorstr='#d5d6d7',GradientType=0); /* IE6-9 */

來源

2015-07-14 10:02:32 JRW

CSS HTML只有灰色的矩形與偏色

回答

相關問題