कैल्क() 100% + # पीएक्स

Question

मैं कुछ हासिल करने की कोशिश कर रहा हूं, यहां तक ​​कि मुझे भी यकीन नहीं है कि यहां संभव है।

मैं अपनी साइट के लिए नौसेना के नीचे एक विशेष ड्रॉप छाया पीएनजी छवि रखने की कोशिश कर रहा हूं। हालांकि मैं साइट पर इच्छित किसी ऑब्जेक्ट के लिए इस क्षमता का पुन: उपयोग करना चाहता हूं, चाहे वह एक छवि हो, एक div या बटन हो। किसी भी वस्तु के लिए मूल रूप से एक ही छाया छवि का उपयोग करें।

css3 calc() फ़ंक्शन का उपयोग करके मैं ऑब्जेक्ट की ऊंचाई @ 100% + 25px (पीएनजी की ऊंचाई) करने की कोशिश कर रहा हूं।

मैं कोशिश की है स्टाइल:

height: -webkit-calc(100% + 25px); 
height: -moz-calc(100% + 25px); 
height:  -o-calc(100% + 25px); 

लेकिन से मैं क्या Firebug में इकट्ठा कर सकते हैं 100% + 25px के रूप में इस कुछ भी नहीं प्राप्त होता है तो नए 100% है।

मैं भी करने की कोशिश की:

height: -webkit-calc(100% + 25px); 
height: -moz-calc(100% + 25px); 
height:  -o-calc(100% + 25px); 
background-position: 0 -moz-calc(100% + 25px); 

लेकिन कोई खुशी यहाँ या तो।

यदि मैं कैल्क (3em + 25px) का उपयोग करता हूं; यह कोई समस्या नहीं काम करता है, लेकिन यह किसी भी वस्तु पर काम करने के लिए पर्याप्त लचीला नहीं है।

क्या यह भी संभव है? क्या मैं भी समझ में आता हूं ?!

Answer 1

मैं 100% निश्चित नहीं हूं लेकिन working draft वर्णन करता है कि गणना के दोनों किनारों पर ऑपरेटर एक उप अभिव्यक्ति (एक प्रकार का) बनाते हैं।

चूंकि आप एक पूर्ण मूल्य (पीएक्स) के साथ एक सापेक्ष मूल्य (%) को जोड़ रहे हैं, तो यह गणना पूर्ण करने में सक्षम नहीं हो सकता है।

अद्यतन: मैंने एक छोटा परीक्षण किया और ऐसा लगता है कि यह ठीक काम करता है। क्या आप सुनिश्चित हैं कि एचटीएमएल में आपके चयनकर्ता और पद सही हैं? यह Fiddle देखें।