पृष्ठभूमि ढाल और रोटेशन अजीब ओवरले बनाएं

मैं अपनी साइट पर विभाजक के रूप में घूर्णन वाले वर्ग के साथ एक बार का उपयोग करता हूं।पृष्ठभूमि ढाल और रोटेशन अजीब ओवरले बनाएं

पृष्ठभूमि रंग एक ढाल और तय है, इसलिए यह एक अच्छा स्क्रॉल प्रभाव बनाता है, लेकिन जब घुमावदार div दृश्य-पोर्ट शीर्ष तक पहुंच जाता है, तो एक अजीब ढाल ओवरले दिखाई देता है।

बस इसे देखो (आप धीरे धीरे स्क्रॉल करने के लिए जब तक विभाजक दृश्य बंदरगाह के शीर्ष पर पहुंचने की जरूरत है): http://jsfiddle.net/nff2fjf7/4/

body { 
 
    height:800px; 
 
} 
 
.seperator { 
 
    margin:100px 0 0 0; 
 
    background-attachment: fixed; 
 
    background-color: rgba(0, 157, 197, 1); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    width:100%; 
 
    height:40px; 
 
    text-align: center; 
 
} 
 
.triangle { 
 
    width:40px; 
 
    height:40px; 
 
    display: inline-block; 
 
    margin: 10px 0; 
 
    -moz-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    background-attachment: fixed; 
 
    background-color: rgba(0, 157, 197, 1); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
}

<body> 
 
    <div class="seperator"> 
 
     <div class="triangle"></div> 
 
    </div> 
 
</body>

स्रोत

2014-10-11 user4075462

मैं करने के लिए कुछ के साथ कोई समर्थक हूँ वेब डिज़ाइन के साथ करें, और मुझे कोई विशिष्ट विचार नहीं है कि प्रत्येक विशिष्ट कथन क्या करता है, हालांकि, मैं आपको बता सकता हूं।

आपके आकार ढाल के साथ प्रदर्शित नहीं होते हैं। आपके द्वारा ढाल के लिए उपयोग किए जाने वाले रंग लाल/नीले होते हैं, और केवल नीला प्रदर्शित होता है
त्रिभुज से निम्न पंक्ति पर टिप्पणी करता है और आप देखेंगे कि त्रिकोण के लिए आप अपने वर्ग का उपयोग वास्तव में ढाल प्राप्त करते हैं! (नीला से लाल ढाल)

पृष्ठभूमि-अनुलग्नक: तय;

इसके अलावा, आप हर जगह स्क्रॉल करने के लिए पृष्ठभूमि लगाव मोड सेट अगर तुम वर्ग आप त्रिकोण ढाल के लिए उपयोग प्रदर्शित नहीं करता है के रूप में आप यह करना चाहते हैं पर ध्यान देंगे।

यदि आप रंगों के साथ ठीक हैं, तो आपको वास्तव में ढाल की आवश्यकता नहीं है।

संपादित करें: मैं चारों ओर अपने कोड के साथ गड़बड़ है और आप ढाल रखना चाहते हैं (ऊपर से नीचे) आप इस code जो संशोधित स्क्रॉल पृष्ठभूमि लगाव और त्रिकोण के साथ अपने कोड का उपयोग कर सकते हैं:

body { 
    height:800px; 
} 
.seperator { 
    margin:100px 0 0 0; 
    background-attachment: scroll; 
    background-color: rgba(0, 157, 197, 1); 
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
    width:100%; 
    height:40px; 
    text-align: center; 
} 
.triangle{ 
    width: 0; 
    height: 0; 
    display: inline-block; 
    margin: 40px 0; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    border-top: 30px solid rgba(231, 52, 76, 1); 
}

स्रोत

2014-10-11 08:55:28 Zero

: ssue अब भी नीचे मौजूद है। यही है 'पृष्ठभूमि-अनुलग्नक: निश्चित' के लिए है। मैंने थोड़ा सा पहेली संशोधित किया। [इस पहेली को देखें] (http://jsfiddle.net/6r0b0b2z/) और स्क्रॉल किए जाने पर आप रंग परिवर्तन देख सकते हैं। – misterManSam

मैं आपको बता सकता हूं कि ऐसा क्यों होता है, लेकिन मुझे नहीं पता कि इस समय इसे "ठीक से" कैसे ठीक किया जाए। आपको यह व्यवहार मिलता है क्योंकि आपका घुमावदार वर्ग नकारात्मक स्क्रीन निर्देशांक में जाता है और इसे मूल शीर्ष से पुन: गणना किया जाता है, घुमावदार नहीं। चूंकि स्क्वायर स्क्रीन से निकलता है (वर्ग या अदृश्य होने पर वह हिस्सा अदृश्य हो सकता है) जैसे कि यह विपरीत तरफ खींचा जाता है। इसलिए, यदि आप स्क्रीन के शीर्ष पर अपना वर्ग डालते हैं तो यह मुश्किल से दिखाई दे रहा है कि अदृश्य हिस्सा कार्य करेगा जैसे कि यह स्क्रीन के निचले हिस्से में है और इसके विपरीत। – Zero

यदि वर्ग को नीचे तक सभी तरफ स्क्रॉल करें तो आपको समान व्यवहार दिखाई देगा। – Zero

body { 
 
    height:800px; 
 
} 
 
.seperator { 
 
    margin:100px 0 0 0; 
 
    background-attachment: fixed; 
 
    background-color: rgba(0, 157, 197, 1); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    width:100%; 
 
    height:40px; 
 
    text-align: center; 
 
} 
 
.triangle { 
 
    width:40px; 
 
    height:40px; 
 
    display: inline-block; 
 
    margin: 10px 0; 
 
    -moz-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    background-attachment: fixed; 
 
    background-color: rgba(0, 157, 197, 1); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1)); 
 
    background-repeat:no-repeat; 
 
}

<body> 
 
    <div class="seperator"> 
 
     <div class="triangle"></div> 
 
    </div> 
 
</body>

की स्थापना background-repeat:no-repeat.triangle पर पेज के शीर्ष पर यह इलाज करने के लिए लगता है, लेकिन मैं आप पेज, ढाल रंग में परिवर्तन स्क्रॉल/

Fiddle

स्रोत

2014-10-11 13:59:46 andrew

अच्छी तरह से धन्यवाद, कम से कम शीर्ष समस्या हल हो गई है।हाँ सच मैंने उल्लेख नहीं किया कि यह पृष्ठ के अंत में भी हो रहा है। – user4075462

पृष्ठभूमि ढाल और रोटेशन अजीब ओवरले बनाएं

उत्तर

संबंधित मुद्दे