मैं एक निश्चित सीएसएस लंबन प्रभाव प्राप्त करने की कोशिश कर रहा हूं जो एक निश्चित पृष्ठभूमि ऊंचाई के बिना काम कर रहा है। यह fewplaces में वर्णित है, लेकिन उनके पास सामान्य बाधा है कि पृष्ठभूमि परत में एक निश्चित, ज्ञात ऊंचाई होनी चाहिए।निश्चित पृष्ठभूमि ऊंचाई के बिना शुद्ध सीएसएस लंबन?
मैं कुछ गतिशील सामग्री के कारण पृष्ठभूमि के लिए एक निश्चित, ज्ञात ऊंचाई के बिना प्रभाव प्राप्त करना चाहता हूं।
मेरे कम से कम उदाहरण यहाँ है: https://jsfiddle.net/yf8oyben/
#container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 1px;
overflow-x: hidden;
overflow-y: scroll;
}
.background {
transform: translateZ(-1px) scale(2);
width: 100%;
background: lightgreen;
height: 250px; /* Assumes bg height */
position: absolute; /* Assumes bg height */
top: calc(125px - 50vh); /* Assumes bg height */
}
.foreground {
background: rgba(0, 0, 255, 0.5);
width: 100%;
position: absolute; /* Assumes bg height */
top: 250px; /* Assumes bg height */
}
<body>
<div id='container'>
<div id="group1">
<div class="background">
<div style="height: 10rem"></div>
<center>Banner</center>
<div style="height: 10rem"></div>
</div>
<div class="foreground">
<div style="height: 10rem"></div>
<center>Content</center>
<div style="height: 100rem"></div>
</div>
</div>
</div>
</body>
अब यह काम करता है लेकिन यह मानता है कि पृष्ठभूमि 250px है, के रूप में सीएसएस में एनोटेट। क्या इसे हटाने के लिए संभव है और अभी भी प्रभाव को बरकरार रखना है?
मैं इस समस्या को एक बहुत के साथ संघर्ष किया है और किसी भी संभव समाधान नहीं मिला है, मूल रूप से मुख्य मुद्दा यह है कि एक माता पिता div नहीं कर सकता है अपनी ऊंचाई को एक पूर्ण बाल div पर सेट करें, इसलिए आपको इसकी ऊंचाई निर्धारित करने के लिए एक पंक्ति जेएस डालना होगा। –