मेरा background-attachment:fixed ठीक काम कर रहा है। लेकिन जब मैं CSS3 को परिभाषित करता हूं तो उस DIV पर घुमाएं और नीचे स्क्रॉल करें background-attachment:fixed काम करना बंद कर देता है।GIve css3 क्रोम में एक DIV पर घूमता है तो पृष्ठभूमि-अनुलग्नक: निश्चित बनाने की बग
चेक इस http://jsfiddle.net/P3jS4/
अभी मैं chrome18 पर काम कर रहा हूँ।
जब आप घुमावदार सीएसएस को हटाते हैं तो पृष्ठभूमि-अनुलग्नक: निश्चित कार्य ठीक काम करता है।
यह एक बग नहीं है।
आप कुछ करने की कोशिश कर रहे हैं the spec अभी तक परिभाषित नहीं किया गया है। यह टिप्पणियों में कहता है:
संशोधित पृष्ठभूमि क्या बदलती है? उन्हें शायद पूरी तरह से परिवर्तन को अनदेखा करना चाहिए, क्योंकि - यहां तक कि रूपांतरित - ऑब्जेक्ट को "पोर्थोल" के रूप में कार्य करना चाहिए जिसके माध्यम से निश्चित पृष्ठभूमि को इसके मूल रूप में देखा जा सकता है।
समस्या यह है कि "निश्चित" का अर्थ व्यूपोर्ट (ब्राउज़र विंडो) के सापेक्ष है, मूल तत्व नहीं। व्यूपोर्ट घूमता नहीं है और केवल एक व्यूपोर्ट है।
विनिर्देश को देखते हुए सही दृष्टिकोण नहीं है कि हम नहीं जानते कि "काम नहीं" से आपका क्या मतलब है। यदि यह अन्य ब्राउज़रों में "काम करता है" ऐसा इसलिए है क्योंकि उन्होंने spec को अपडेट करने के इंतजार किए बिना निर्णय लिया है। आपको अपने व्यवहार को प्रतिबिंबित करने के लिए अपना प्रश्न अपडेट करना चाहिए, चाहे वह "काम करता है" या नहीं।
इस चरण में ब्राउज़र फिक्स की उम्मीद करने के लिए इस बिंदु पर कोई बिंदु नहीं है क्योंकि आप विनिर्देश के बाहर काम कर रहे हैं। एक पृष्ठभूमि
img का उपयोग करते हुए एक पेंट प्रोग्राम में पृष्ठभूमि घूर्णन कैनवास या एसवीजीइनमें से कोई भी इस्तेमाल किया जा सकता है, तो और कोई अन्य समाधान तो अपने जव उपलब्ध हैं एर यह है कि यह नहीं किया जा सकता है।
अद्यतन: मैं सिर्फ महसूस किया कल्पना मैं जुड़ा हुआ एक newer version जो के रूप में अपेक्षित व्यवहार स्पष्ट किया द्वारा superceeded कर दिया गया है
फिक्स्ड पृष्ठभूमि किसी भी द्वारा नहीं प्रभावित कर रहे हैं मूल तत्व के लिए निर्दिष्ट बदलने, और कोई अन्य परिवर्तन।
इस प्रकार एक निश्चित पृष्ठभूमि के साथ एक तत्व अभी भी एक "porthole" एक छवि है कि व्यूपोर्ट में भी निश्चित होती है में की तरह काम करता है, और तत्व पर बदल देती है porthole, नहीं इसके पीछे पृष्ठभूमि प्रभावित करते हैं। अन्य हाथ पर, मूल तत्व को बदलने से निश्चित रूप से पृष्ठ पर सबकुछ बदल जाएगा, निश्चित पृष्ठभूमि को छोड़कर सबकुछ के बजाय।
मानते हुए कि "काम नहीं कर रहा" का मतलब है कि पृष्ठभूमि घूमती नहीं है तो आप जो कर रहे हैं वह एक अनुरूप ब्राउज़र में काम नहीं करेगा।
क्रोम और फ़ायरफ़ॉक्स के बीच [यह fiddle] (http://jsfiddle.net/P3jS4/49/embedded/result/) की तुलना करने से, यह वास्तव में घुमावदार मुद्दा नहीं है। निश्चित पृष्ठभूमि के लिए 'repeat-y' नहीं है। छवि को फ़ायरफ़ॉक्स की तरह व्यूपोर्ट पर y-axis में दोहराया जाना चाहिए, लेकिन क्रोम में नहीं है, इसलिए मुझे लगता है कि इसे अभी भी एक बग कहा जाना चाहिए। हालांकि, spec पर दिलचस्प जानकारी। – ScottS
अच्छी तरह से सवाल दोहराना-y का उल्लेख नहीं करता है, लेकिन यदि वास्तव में समस्या है तो समाधान यह हो सकता है कि पहेली 'पृष्ठभूमि' शॉर्टकट में पैरामीटर के गलत क्रम का उपयोग करती है। जबकि कुछ ब्राउज़र लापता/पुनरावर्तित तर्कों का समर्थन करते हैं, मैंने पाया है कि व्यावहारिक रूप से यह एक बुरा विचार है। क्रोमियम स्थापित करने के बाद मैं पुष्टि करूंगा। – SpliFF
मुझे स्पष्टीकरण देना चाहिए - घूर्णन उसमें एक मुद्दा है जो यह जोड़ता है कि यह निश्चित पृष्ठभूमि तत्व में दोहराव-वाई को तोड़ने लगता है। – ScottS
मैं एक काम कर समाधान उपयोग कर सकते हैं कि दोनों तय के साथ बदलना बारी बारी से है।
यह info को ध्यान में लेता है कि वे काम नहीं कर सकता एक साथ, लेकिन उन्हें अलग से कार्य करें।
एक बार जब आप छवि के तहत कुछ वास्तविक सामग्री है, तो ब्राउज़र के निचले दाएं कोने व्यूपोर्ट, जो fixed मूल्य का उपयोग करने की अंतिम मान्य स्थान है छूने से उस छवि के नीचे दाएं कोने पाएगा होगा। क्योंकि उसके बाद यह शून्य की भूमि है।
यहां fiddle है!
यह updated fiddle दिखाता है कि घूर्णन विपरीत दिशा में जा रहा है।
आपकी सटीक आवश्यकताओं पर हमारी चर्चा के अनुसार, अब मेरे पास आपकी तलाश है। यह विधि एक पूर्ण पुनः लिखना है और आंतरिक छवि को बिना घुमाए रहने की अनुमति देने के लिए घुमाव के साथ संयुक्त मुखौटा प्रभाव का उपयोग करता है ... लेकिन उसमें भी इसका अपना घूर्णन हो सकता है!
यहां NEW Fiddle है जिसमें सीएसएस की व्याख्या करने वाली कई टिप्पणियां हैं।
स्थिति अपडेट: मेरे कोई भी जवाब सही नहीं है क्योंकि मुझे ओपी की पूर्ण आवश्यकताओं का एहसास नहीं हुआ। वर्तमान में, एक निश्चित छवि के साथ घूमने का उपयोग एक गैर मानक मानदंड है जिसे पहले लिंक जानकारी के माध्यम से ऊपर चर्चा की गई थी। शायद इस अद्वितीय और चुनौतीपूर्ण आवश्यकता के लिए एक jQuery लंबन विधि उपयुक्त है। सामग्री संपत्ति को
आप एचटीएमएल टैग को घूमते हैं। जो सभी – sandeep
पर एक अच्छा विचार नहीं है HTML टैग उस पर घूर्णन तत्व को ध्यान में रखता नहीं है। क्या कोई कारण नहीं है कि यह एक अच्छा विचार नहीं है? – arttronics
यदि आप HTML को घुमाते हैं तो उस HTML के अंदर पूरी सामग्री भी घूमती है। – sandeep
बदलें पृष्ठभूमि संपत्ति
.pic{
background:url(http://cssglobe.com/lab/angled/img.jpg) fixed 0 0;
height:300px;
-webkit-transform: rotate(-10deg);
border:1px solid green;
}
.pic{
content:url(http://cssglobe.com/lab/angled/img.jpg) fixed 0 0;
height:300px;
-webkit-transform: rotate(-10deg);
border:1px solid green;
}
कृपया अपना प्रयास करें। यह – sandeep
संदीप पर काम नहीं कर रहा है, यह ** उत्तर सही उत्तर ** है। मेरा जवाब बहुत सी सीएसएस का उपयोग करता है और यह महान नहीं है लेकिन {content: url} वास्तव में काम करता है! मैं इस समाधान के आधार पर बेवकूफ के साथ अद्यतन करूँगा। – arttronics
ऊपर दिए गए मेरे संपादन की प्रतीक्षा करने की आवश्यकता है। तो यहां अपडेट किया गया [jsFiddle] (http://jsfiddle.net/P3jS4/100/) 100 पर है! अनुस्मारक: केवल क्रोम। – arttronics
मुझे लगता है कि आप क्या करने की जरूरत को दूर है background: ...तय 0 0; संपत्ति को घुमाने के लिए छवि प्राप्त करने के स्क्रॉल करते समय इसे खोने के दौरान ठीक से। उस के लिए पहेली this होगा; अन्यथा आप इसके अंदर एक घुमावदार आयताकार के साथ एक आयताकार छवि बना सकते हैं जो पारदर्शी है। यह उस सीएसएस के लिए छवि हैक होगा जिसे आप पूरा करने की कोशिश कर रहे हैं।हाल ही विकास के लिए
नई उत्तर: 4 जुलाई, 2012
मैं एक jsFiddle work-in-progress कि मैं तुम्हें और रिहाई जल्दी के साथ साझा करना चाहते हैं।
यह आपको इस विशेष शैली को पूरा करने के तरीके पर विचार देना चाहिए।
विशेष रूप से, इसमें लंबन प्रभाव है। अधूरा डेमो में
नोट छवि div अलग ढंग से (उसे ठीक किया और दोहराया सेट है), उपयोग CSS3 के contain या सामग्री प्रदर्शित है के लिए अलग अलग लंबन प्रभाव के लिए उदाहरण के लिए cover में सेट किया जा सकता है।
यह छवियों तक सीमित नहीं है और इसके बजाय किसी भी स्थैतिक सामग्री का उपयोग किया जा सकता है क्योंकि यह ऑब्जेक्ट कभी घुमाया नहीं जाता है/घुमावदार काउंटर होता है जो ब्राउज़र सीपीयू हिट नहीं करता है।
jsFiddle स्क्रीनशॉट (पर कब्जा कर लिया ज़ूम आउट किया गया था):
मास्क जानबूझकर नीचे छवि में दिखाया जाता है, यह पृष्ठभूमि रंग से मेल खाना चाहिए। चुनिंदा ब्राउज़रों के लिए, आप रंगीन मुखौटा के बजाय CSS3 border-image संपत्ति का उपयोग कर सकते हैं (क्योंकि पीले मास्क वास्तव में सीमा है!)। 
उदाहरण 1:
यहाँ मुखौटा, अस्पष्टता, और अतिरिक्त गद्दी समायोजित के साथ एक jsFiddle है (के रूप में इरादा कुछ हद तक देखने पर।)।
उदाहरण 2:
यहाँ पंच-बाहर पूरे वेबपेज के लिए प्रभाव को वर्णन करने CSS3 cover विधि के साथ दिखाया गया है सामग्री के साथ के रूप में ऊपर एक jsFiddle है।
मैं जल्द ही वापस इस परियोजना को पाने के लिए की जरूरत है। इस बीच, कृपया इस शुरुआती काम का उपयोग करने के लिए स्वतंत्र महसूस करें, हालांकि आप चाहें। चीयर्स!
आप बताएं कि आपको क्या हासिल करना चाहते हैं, इसलिए न इसकी मदद से आप –
@Dbugger पृष्ठभूमि लगाव घुमाने सीएसएस को दूर तो मुश्किल: तय काम ठीक http://jsfiddle.net/P3jS4/2/ लेकिन यह बारी बारी से जोड़ने तो यह एक बग – sandeep
बना रहा है मेरे पास अभी तक कोई समाधान नहीं है, हालांकि ऐसा लगता है कि 'निश्चित' के साथ ऐसा कोई मुद्दा नहीं है जैसा कि यह 'दोहराना-वाई' संपत्ति के साथ करता है, क्योंकि ऐसा लगता है कि पृष्ठभूमि को दोहराया नहीं जा रहा है वाई-अक्ष में। फ़ायरफ़ॉक्स बनाम क्रोम पर [इस पहेली] की तुलना करें (http://jsfiddle.net/P3jS4/49/embedded/result/)। यह क्रोम के लिए एक प्रतिपादन बग प्रतीत होता है। – ScottS