مشکل با Gradient

[leontry89]

دوستان من می خواستم یک رنگ پس زمینه از نوع gradiant بدم و این استایل و نوشتم و جواب هم گرفتم
فقط مشکلم اینجاست که میزان رنگ قرمز رو نمی تونم کم کنم
منظورم کم کردن ارتفاع گرادیانت هستش


background-color:#000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background: -webkit-linear-gradient(20px 60px,red, blue) no-repeat fixed; /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(20px 60px,red, blue)no-repeat fixed; /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(20px 60px,red, blue)no-repeat fixed; /* For Firefox 3.6 to 15 */ background: linear-gradient(20px 60px,red, blue)no-repeat fixed; /* Standard syntax (must be last) */

[SlowCode]

به جای واژه red برای رنگ قرمز، از rgba استفاده کن و پارامتر چهارم یا همون آلفا رو یه عدد بین 0 و 1 بده. مثلا 0.5 میشه همون 50%
اگر هم مقدار rgb رنگ مورد نظرت رو نمیدونی، کد Hex رنگت رو تو فتوشاپ پیدا کن بعد تو سایت زیر به rgba تبدیل کن
http://hex2rgba.devoth.com/

[leontry89]

دوست عزیز واقعا ممنونم ازت
میشه یه مثال کوچیک بزنی

[SlowCode]

فرض کنیم رنگ ما #c0392b هست، اون سایت رو باز کن این رنگ رو توش بنویس و مقدار opacity رو هم به طور دلخواد تنظیم کن من روی 50% تنظیم کردم.
خروجی شد این:
rgba(192, 57, 43, 0.5)
حالا شما مثلا به جای این کد:
background: -webkit-linear-gradient(20px 60px,red, blue) no-repeat fixed;
بنویس:
background: -webkit-linear-gradient(20px 60px,rgba(192, 57, 43, 0.8), rgba(41, 128, 185,0.8)) no-repeat fixed;

حالا اگه همه رنگ ها رو تبدیل کنیم میشه این:

body{
background-color:rgba(41, 128, 185,0.8);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background: -webkit-linear-gradient(20px 60px,rgba(192, 57, 43, 0.8), rgba(41, 128, 185,0.8)) no-repeat fixed;
background: -o-linear-gradient(20px 60px,rgba(192, 57, 43, 0.8), rgba(41, 128, 185,0.8))no-repeat fixed;
background: -moz-linear-gradient(20px 60px,rgba(192, 57, 43, 0.8), rgba(41, 128, 185,0.8))no-repeat fixed;
background: linear-gradient(20px 60px,rgba(192, 57, 43, 0.8), rgba(41, 128, 185,0.8))no-repeat fixed;
}

واسه ایجاد گرادینت هم میتونی از سایت زیر کمک بگیری
http://www.colorzilla.com/gradient-editor/