div

Question

के अंदर फिक्स्ड स्थिति पृष्ठभूमि छवि मैं एक div तय की पृष्ठभूमि बनाना चाहता हूं ताकि स्विचिंग div फोन स्क्रीन पर छवियों को स्विच करने का प्रभाव दे सके। यह इस के खराब संस्करण की तरह है: https://www.android.com/versions/nougat-7-0/

Fiddle link।

मैं इस तरह से कोशिश कर रहा हूँ:

.main { 
 
    min-height: 1000px; 
 
} 
 

 
.col1 { 
 
    width: 29.9%; 
 
    min-height: 800px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.col2 { 
 
    width: 70%; 
 
    min-height: 800px; 
 
    display: inline-block; 
 
} 
 

 
.row1 .col1 { 
 
    background: rgba(238, 238, 34, 0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/24-hours-phone-icon.png") !important; 
 
    background-position: left !important; 
 
    background-repeat: no-repeat !important; 
 
    background-size: contain !important; 
 
    background-attachment: fixed !important; 
 
} 
 

 
.row2 .col1 { 
 
    background: rgba(238, 238, 34, 0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/abs-icon.png") !important; 
 
    background-position: left !important; 
 
    background-repeat: no-repeat !important; 
 
    background-size: contain !important; 
 
    background-attachment: fixed !important; 
 
} 
 

 
.row3 .col1 { 
 
    background: rgba(238, 238, 34, 0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-down-icon.png") !important; 
 
    background-position: left !important; 
 
    background-repeat: no-repeat !important; 
 
    background-size: contain !important; 
 
    background-attachment: fixed !important; 
 
}

<div class="main"> 
 
    <div class="row1"> 
 
    <div class="col1"> 
 
     Col1 
 
    </div> 
 
    <div class="col2"> 
 
     Col2 
 
    </div> 
 
    </div> 
 
    <div class="row2"> 
 
    <div class="col1"> 
 
     Col1 
 
    </div> 
 
    <div class="col2"> 
 
     Col2 
 
    </div> 
 
    </div> 
 
    <div class="row3"> 
 
    <div class="col1"> 
 
     Col1 
 
    </div> 
 
    <div class="col2"> 
 
     Col2 
 
    </div> 
 
    </div> 
 
</div>

लेकिन कोई किस्मत वहाँ के बाद से चित्र हमेशा div तुलना में बड़ा है और और div मैं जरूरत के रूप में और भी अधिक समस्या के अंदर नहीं है कि जब है ब्राउज़र का आकार बदल रहा है पृष्ठभूमि की स्थिति भी बदल रही है।

मुझे पृष्ठभूमि संलग्नक की वजह से पता है, इसलिए यह एक छेद व्यूपोर्ट देख रहा है, न कि केवल div, लेकिन क्या यह प्राप्त करने के लिए कोई कामकाज है?

तो लक्ष्य पृष्ठभूमि पर अच्छी तरह से पृष्ठभूमि छवि रखना है लेकिन इस मां div के अंदर निश्चित स्थिति है, इसलिए स्विचिंग प्रभाव को स्क्रॉल करते समय। ब्राउजर व्यूपोर्ट तस्वीर बदलते समय हमेशा माँ div के केंद्र में एक ही आकार होता है।

---

मुझे स्क्रॉल जादू के बारे में पता है, लेकिन मुझे बस कुछ और "प्राकृतिक" गंदे सीएसएस या न्यूनतम जेएस कोड चाहिए।

Answer 1

कुछ कोशिश करने के बाद मैं इस के साथ बाहर आया, लेकिन यह एक जेएस समाधान है, फिर भी अगर कोई शुद्ध सीएसएस के साथ इसे क्रैक करता है तो भी बहुत खुश होगा।

फिडल लिंक https://jsfiddle.net/w4hz4cqf/31/

बदला गया सीएसएस कोड थोड़ा:

.main 
    { 
     min-height: 1000px; 
     width: 500px; 
     margin: 0 auto; 

    } 

    .col1 
    { 
     width: 150px; 
     min-height: 800px; 
     display: inline-block; 
     float: left; 
    } 

    .col2 
    { 
     width: 70%; 
     min-height: 800px; 
     display: inline-block; 
    } 

    .row1 .col1 
    { 
     background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/24-hours-phone-icon.png") !important; 
     //background-position: left !important; 
     background-repeat: no-repeat !important; 
     background-size: 100px 100px !important; 
     background-attachment: fixed !important; 
    } 

    .row2 .col1 
    { 
     background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/abs-icon.png") !important; 
     background-position: left !important; 
     background-repeat: no-repeat !important; 
     background-size: 100px 100px !important; 
     background-attachment: fixed !important; 
    } 

    .row3 .col1 
    { 
     background: rgba(238,238,34,0.3) url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-down-icon.png") !important; 
     background-position: left !important; 
     background-repeat: no-repeat !important; 
     background-size: 100px 100px !important; 
     background-attachment: fixed !important; 
    } 

जोड़ा जे एस कोड:

jQuery(document).ready(function(){ 
     backgroundImageSize = 100; 

     elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 
     for(ind = 0; ind < 3; ind++) { 
     elem[ind].getBoundingClientRect(); 

      elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width()/2 - (backgroundImageSize/2))+'px center', 'important'); 
     } 

     var width = $(window).width(); 
     $(window).on('resize', function(){ 
     if($(this).width() != width){ 
      width = $(this).width(); 
      elem = jQuery(".row1 .col1, .row2 .col1, .row3 .col1"); 

      for(ind = 0; ind < 3; ind++) { 
       elem[ind].getBoundingClientRect(); 
       elem[ind].style.setProperty('background-position', (elem[ind].getBoundingClientRect().left + jQuery(".col1").width()/2 - (backgroundImageSize/2))+'px center', 'important'); 
      } 
     } 
     }); 
    }); 

Answer 2

इस

background-size: 29.9% 100% !important; 

Fiddle

Answer 3

दुर्भाग्य से इस बस कैसे तय पोजीशनिंग सीएसएस में काम करता है और वहाँ शुद्ध सीएसएस में इसके चारों ओर कोई रास्ता नहीं है की एक विरूपण साक्ष्य है की कोशिश करो - आप जावास्क्रिप्ट का उपयोग करने के लिए है।

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

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