सीमा

Question

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

यहाँ http://jsfiddle.net/hq65C/1/ एक अन्य उदाहरण: http://jsfiddle.net/DytDA/

ऐसा क्यों है? मैं हमेशा सोच रहा था कि सीमा तत्व के बाहर है। मैं इसे कैसे ठीक कर सकता हूं। (मुझे ऐसे समाधान की आवश्यकता है जिसे HTML को संशोधित करने की आवश्यकता नहीं है)।

Answer 1

कैसे background-clip: padding-box;?

Demo

Answer 2

मुझे लगता है कि यह है कि अगर सीमा तत्व बाहर थे, व्यवहार आप के पीछे हैं (कि सीमा पर क्लिक तत्व के अंदर क्लिक करने के रूप में व्यवहार) या तो

काम नहीं होता अगर पृष्ठभूमि छवि दोहराया नहीं है , आप पृष्ठभूमि-स्थिति x स्थिति को उसी सीमा तक सेट कर सकते हैं जो आपकी सीमा चौड़ाई है। नहीं, तो आप भी तत्व के पीछे रंग के रूप में ही करने के लिए सीमा रंग सेट करने का प्रयास कर सकते हैं, लेकिन अगर यह एक छवि है, अच्छी किस्मत है

Answer 3

सीएसएस background इस पर लेयरिंग border के क्षेत्र भरता है, border-color साथ।

जैसा कि आपके पास पारदर्शी border है, यह इसके पीछे background-color प्रदर्शित कर रहा है।

सादे एचटीएमएल/सीएसएस के साथ, मुझे यकीन नहीं है कि इसके आसपास एक रास्ता है।

यह jsFiddle इस demostrates:

http://jsfiddle.net/hq65C/8/

Answer 4

इस प्रयास करें:

<a href="#"><span style="background: red">link</span></a> test test test <br/> 
test test test 

नोटिस: काल एक और शैली (अन्य सीएसएस मान) के साथ एक इनलाइन तत्व का मतलब है। दूसरा वह div जो एक नया ब्लॉक मजबूर करेगा।