2010-09-18 5 views
11

मैं अपने वेबपृष्ठ की पृष्ठभूमि के रूप में ढाल करना चाहता हूं। मैंने यह पता लगाया है कि ढाल को लंबवत कैसे बनाया जाए लेकिन मैं क्षैतिज होना चाहता हूं।क्षैतिज सीएसएस ग्रेडियेंट्स?

background-image: -webkit-gradient(linear, 0% 25%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255))); 
background-image: -moz-linear-gradient(center bottom, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%); 

उत्तर

8

-webkit-gradient के लिए आप दो अंक (आपके मामले में 2 और 3 तर्क) का उपयोग करके दिशा निर्धारित करें और -moz-linear-gradient के लिए यह प्रारंभिक बिंदु केवल (पहला तर्क) द्वारा परिभाषित किया है। तो क्षैतिज लोगों को उन ढ़ाल चालू करने के लिए, तुम क्या चाहते हैं:

background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255))); 
background-image: -moz-linear-gradient(center right, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%); 

(आप अपने रंग मान बदलाव करने क्योंकि आप प्रत्येक ब्राउज़र के लिए अलग तरह से अंक को परिभाषित कर रहे हैं हो सकता है अगर आप सेट यह आसान हो सकता है। वेबकिट के साथ center right, center left को मोज़िला से मिलान करने के लिए अंक।)

+0

वैसे भी यह काम IE9 के साथ करने के लिए? – daveomcd

+1

हां। इंटरनेट एक्सप्लोरर 8 और 9: '-ms-filter:" प्रोजेड: DXImageTransform.Microsoft.Gradient (GradientType = 1, startColorstr = '# b0c4de', endColorstr = '# ffffff') के लिए इस पंक्ति का उपयोग करें "' – Henrik