1 डीवी

Question

पर एकाधिक पृष्ठभूमि रंग मेरे पास div है, और मैं CSS3 का उपयोग करके क्षैतिज रूप से 2 पृष्ठभूमि लागू करना चाहता हूं, लेकिन मैं इसे समझ नहीं सकता, और इसलिए मैं किसी भी मदद की सराहना करता हूं!

background: blue top no-repeat 10%; 
    background: yellow bottom no-repeat 10%; 

मैं ऊपर का आधा एक रंग होना चाहता हूँ, और नीचे आधा एक अलग रंग किया जाना है।

मुझे पता है कि इसे छवियों के साथ आसानी से किया जा सकता है, लेकिन मैं यह नहीं समझ सकता कि इसका उपयोग किए बिना इसे कैसे किया जाए।

http://jsfiddle.net/thirtydot/8wH2F/

हाँ, मैं झूठ बोला था:

Answer 1

एक ढाल इस CSS3 का उपयोग कर ऐसा करने के लिए एक यथोचित आसान तरीका है और केवल एक div है। यह एक ही बात की असंख्य विभिन्न विक्रेता उपसर्ग के संस्करणों है कि आप उपयोग करने की आवश्यकता की वजह से सब पर बहुत सरल नहीं है:

div { 
    background: #000fff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #000fff 0%, #000fff 50%, #ffff00 50%, #ffff00 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(50%,#000fff), color-stop(50%,#ffff00), color-stop(100%,#ffff00)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* IE10+ */ 
    background: linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* W3C */ 
} 

मैं सीएसएस here उत्पन्न, और filter संपत्ति हटा दिया है, क्योंकि यह एक वास्तविक ढाल में परिणाम होगा आईई 6-9 में।

Answer 2

एक और तरीका है इस लक्ष्य को हासिल करने के लिए, के अलावा ढ़ाल से, छद्म तत्व का उपयोग करने के लिए है:

http://jsfiddle.net/kizu/S3LXB/

position: relative और कुछ सकारात्मक z-index तत्व और नकारात्मक z-index छद्म तत्व में जोड़े, और यह तत्व की पृष्ठभूमि पर रखा जाएगा, लेकिन तत्व की सामग्री के तहत। और फिर आप बस कैसे चाहते हैं में स्थिति बना सकते हैं।

इस तरह ग्रेडिएंट वाले एक के रूप में लचीला नहीं है, लेकिन! आप निश्चित रूप से छद्म तत्व के लिए ग्रेडियेंट का उपयोग कर सकते हैं और इसलिए अधिक आसानी से और अधिक प्रभाव प्राप्त कर सकते हैं।