html - detected - स्क्रीन ओवरले सेटिंग्स




Css में कोई ओवरले कैसे बना सकता है? (6)

मैं एक मनमाने आकार के साथ एक div बनाना चाहूंगा, फिर उस div के ऊपर कुछ प्रदर्शित करूँगा। सीएसएस में नीचे दिए गए विभाजन की तरह ओवरले को स्थिति और आकार देने का सबसे अच्छा तरीका क्या है?


अपने वर्तमान HTML और CSS के उदाहरणों को देखे बिना त्वरित उत्तर z- इंडेक्स का उपयोग करना है

सीएसएस:

#div1 {
position: relative;
z-index: 1;
}

#div2 {
position: relative;
z-index: 2;
}

जहां div2 ओवरले है


मुझे पार्टी में देरी हो रही है, लेकिन अगर आप केवल सीएसएस का उपयोग करके मनमाना तत्व करना चाहते हैं, तो पोजिशनिंग, ओवरले डिव आदि के साथ खिलवाड़ किए बिना, आप इनसेट बॉक्स शैडो का उपयोग कर सकते हैं:

box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);

यह 4000 पिक्सेल से अधिक लंबे या चौड़े किसी भी तत्व पर काम करेगा।

उदाहरण: http://jsfiddle.net/jTwPc/


मैं यह करने के लिए सीएसएस विशेषताओं का उपयोग करने का सुझाव दूंगा। आप स्थिति का उपयोग कर सकते हैं: किसी तत्व को दूसरे के शीर्ष पर रखने के लिए पूर्ण।

उदाहरण के लिए:

<div id="container">
   <div id="on-top">Top!</div>
   <div id="on-bottom">Bottom!</div>
</div>

और सी.एस.एस.

#container {position:relative;}
#on-top {position:absolute; z-index:5;}
#on-bottom {position:absolute; z-index:4;}

मैं सलाह के लिए इस पर एक नज़र रखना होगा: http://www.w3schools.com/cssref/pr_class_position.asp

और अंत में यहाँ आपको मेरा उदाहरण दिखाने के लिए एक jsfiddle है

http://jsfiddle.net/Wgfw6/


यदि आपको z- इंडेक्स के साथ खिलवाड़ करने में कोई आपत्ति नहीं है, लेकिन आप ओवरले के लिए अतिरिक्त div जोड़ने से बचना चाहते हैं, तो आप निम्नलिखित दृष्टिकोण का उपयोग कर सकते हैं

/* make sure ::before is positioned relative to .foo */
.foo { position: relative; }

/* overlay */
.foo::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
/* make sure all elements inside .foo placed above overlay element */
.foo > * { z-index: 1; }

http://jsfiddle.net/55LNG/1/

सीएसएस:

#box{
    border:1px solid black;
    position:relative;
}
#overlay{
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color:rgba(255,255,0,0.5);
}

आप position:absolute उपयोग कर सकते हैं position:absolute अपनी div के अंदर एक ओवरले की स्थिति के लिए position:absolute और फिर इसे सभी दिशाओं में इस तरह से बढ़ाएँ:

सीएसएस अद्यतन *

.overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
    z-index:9999;
    color:white;
}

आपको बस यह सुनिश्चित करने की आवश्यकता है कि आपके माता-पिता की position:relative संपत्ति इसमें जोड़ी गई है और एक कम z-index

नीचे एक टिप्पणीकार के लिए IE7 + सहित सभी ब्राउज़रों में काम करने वाला डेमो बनाया जाना चाहिए।

Demo

सीएसएस से opacity संपत्ति को हटा दिया और इसके बजाय पृष्ठभूमि देने के लिए एक rGBA रंग का उपयोग किया, और केवल पृष्ठभूमि, एक अपारदर्शिता स्तर। इस तरह से ओवरले को वहन करने वाली सामग्री प्रभावित नहीं होगी। चूंकि IE rGBA का समर्थन नहीं करता है इसलिए मैंने इसके बजाय एक IE हैक का उपयोग किया है ताकि यह एक बेस 64 एनकोडेड पीएनजी पृष्ठभूमि छवि दे सके जो इसके बजाय ओवरले डिव को भरता है, इस तरह हम आईईएस अपारदर्शिता मुद्दे से बच सकते हैं जहां यह बच्चों के तत्वों के लिए भी लागू होता है।







css