सीएसएस का उपयोग करके आप "नॉकआउट" प्रभाव कैसे प्राप्त कर सकते हैं?

Question

अद्यतन - मुझे यकीन है कि मैंने इसे समझ लिया है। कोड कुछ हद तक लंबा है, लेकिन मैंने यहां एक पृष्ठ फेंक दिया ताकि आप स्रोत देख सकें: http://www.sorryhumans.com/knockout-header

अवधारणा इस पर आधारित थी: http://algemeenbekend.nl/misc/challenge_gerben_v2.html और फिर मेरी आवश्यकताओं के लिए अनुकूलित किया गया।

हेडर उत्तरदायी है और बाहर खटखटाया गया है। (कृपया खराब, 1 मिनट उत्तरदायी बीजी छवि कार्यान्वयन को अनदेखा करें!)। यह कार्यान्वयन किसी भी CSS3 का उपयोग नहीं करता है, इसलिए मैं कल्पना करूंगा कि संगतता के साथ कई मुद्दे नहीं होंगे।

मुझे लगता है कि एकमात्र मुद्दा यह है कि जब ब्राउजर चौड़ाई क्रोम में एक विषम संख्या (उदाहरण के लिए 13 9 3 पीएक्स) है तो दाहिने हाथ तरल स्तंभ और मुख्य केंद्र कॉलम के बीच 1px अंतर होता है। मुझे फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर के नवीनतम संस्करण में, या जब चौड़ाई एक संख्या भी है (उदाहरण के लिए क्रोम में 1394 पीएक्स) में यह समस्या नहीं दिखाई देती है। कोई विचार?

मूल प्रश्न: मैं यह पता लगाने की कैसे प्रभाव मैं तलाश कर रहा हूँ प्राप्त करने में असमर्थ हूँ एक हैडर कि मैं तैयार किया गया कोड करने के लिए प्रयास कर रहा हूँ, लेकिन। कृपया संलग्न छवि को देखो (नहीं, यह वास्तव में मैं क्या :) सिर्फ एक उदाहरण पर काम कर रहा हूँ नहीं है!)

फ़ोटो पूर्ण-चौड़ाई उत्तरदायी तस्वीर है। हेडर पूर्ण-चौड़ाई है, लेकिन इसकी सामग्री एक उत्तरदायी ग्रिड पर है जो कुछ मनमानी आकार (ब्लैक लाइनों द्वारा दिखाया गया) से अधिक नहीं है, लेकिन स्केल कर सकती है। मैं यह सब पूरा कर सकता हूं, लेकिन मुझे यह पता लगाने में परेशानी हो रही है कि हेडर बार को पारदर्शी बनाने के तरीके को कैसे बनाया जाए, जहां लोगो होगा। दूसरे शब्दों में, लोगो को बार के शीर्ष पर रखने के बजाय, मैं शीर्षलेख के "इसे बाहर करना" चाहता हूं।

क्या यह भी संभव है?

Answer 1

नॉकआउट प्रभावों के लिए कोई अंतर्निहित समर्थन नहीं है, इसलिए आपको एक छवि के हिस्से के रूप में टेक्स्ट रखना होगा।

यह करने के लिए नॉकआउट प्रभाव के पीछे पृष्ठभूमि छवि के ठोस हिस्सा बनने के लिए होगा सबसे आसान तरीका है। आप एक ठोस पृष्ठभूमि और पारदर्शिता के साथ .png बना सकते हैं जहां आप नॉकआउट प्रभाव चाहते हैं, और पूरे शीर्षलेख को आंशिक रूप से पारदर्शी बनाने के लिए css opacity का उपयोग करें। आपको कई अनुभागों के साथ हेडर सेट अप करने की आवश्यकता होगी ताकि वे अनुभाग जो छवियां नहीं हैं (यानी काले सलाखों के बाहर) में पृष्ठभूमि रंग होता है, जबकि छवियों वाले अनुभाग नहीं होते हैं।

बहुत मोटे तौर पर:

<div id="outerHeaderWithOpacity"> 
    <div class="hasBackground">Left side, will stretch</div> 
    <div class="noBackground">Image(s) go here</div> 
    <div class="hasBackground">As many sets as you need</div> 
    <div class="noBackground">Image(s) go here</div> 
    <div class="hasBackground">Right side, will stretch</div> 
</div> 

Answer 2

http://jsfiddle.net/GZ8Xv/

नहीं सुंदर समाधान

लेकिन प्रयोगात्मक css3 flexbox का उपयोग कर: (display: table वापस आने के साथ)

<div class="wrapper"> 
    <div class="left"><br /></div> 
    <div class="middle"><br /></div> 
    <div class="right"><br /></div> 
</div> 

.left, .right 
{ 
    height:100%; 
    border: 1px solid black; 
    display:table-cell; 
    display: -webkit-flexbox; 
    display: -moz-flexbox; 
    display: -ms-flexbox; 
    display: -o-flexbox; 
    -webkit-flex: 1; 
} 

.middle 
{ 
    display: table-cell; 
    display: -webkit-flexbox; 
    width: 500px; 
    height:100%; 
    border: 1px solid blue 
} 

.wrapper 
{ 
    display: table; 

    display: -webkit-flexbox; 
    display: -moz-flexbox; 
    display: -ms-flexbox; 
    display: -o-flexbox; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -ms-box-orient: horizontal; 
    -o-box-orient: horizontal; 
    width: 100%; 
    height: 100px; 
} 

कृपया ध्यान दें: फ्लेक्सबॉक्स w3c spec अभी भी प्रवाह में है और तीसरी बार बदल सकता है। मैंने केवल आईई 9 (आईई 9 और आईई 8 मोड दोनों में इसका परीक्षण किया।आईई 7 मोड में काम नहीं करता है) और क्रोम 20 और 22

कुछ मामूली परिवर्तन: http://jsfiddle.net/GZ8Xv/2/ और आपके पास जावास्क्रिप्ट के बिना आपका 5 div लेआउट है।