मैं एक HTML छवि के ऊपरी बाएं और निचले दाएं भाग में पृष्ठभूमि छवि को कैसे स्थान दे सकता हूं?

Question

मुझे एक पैराग्राफ मिला और मैं उपयोगकर्ता को अनुच्छेद की शुरुआत और अंत दिखाने के लिए एक "मार्कर" दिखाना चाहता हूं।

मुझे ऊपरी बाईं ओर पृष्ठभूमि छवि दिखाने के लिए कोई समस्या नहीं है, लेकिन मुझे नहीं पता कि पृष्ठभूमि-छवि को निचले दाएं किनारे पर कैसे रखा जाए। यहाँ ऊपर बाईं ओर करने के लिए छवि स्थिति के लिए मेरी सीएसएस:

p[class] { 
    background-image: url("../../image/my_image.gif"); 
    background-position: left top; 
    background-repeat: no-repeat; 
} 

मैं नहीं एक समाधान के लिए अतिरिक्त HTML तत्वों का उपयोग रहा हूँ !!! इसे केवल सीएसएस का उपयोग करके काम करने की ज़रूरत है! इस तथ्य के कारण कि पैराग्राफ ने तत्वों के बाद छद्म-पूर्व और छद्म सेट किया है, मैं उन्हें यहां उपयोग करने में सक्षम नहीं हूं। तो सवाल यह है:

अतिरिक्त एचटीएमएल तत्वों का उपयोग किये बिना एचटीएमएल तत्व के ऊपरी बाएं और निचले दाएं हिस्से में पृष्ठभूमि छवि को कैसे स्थापित किया जा सकता है लेकिन केवल सीएसएस (और कोई छद्म तत्व नहीं)?

Answer 1

सिरिल पास लेकिन गलत है। इसे background-position: right bottom;

सामान्य रूप से होना चाहिए - यह संख्यात्मक मानों का उपयोग करने के लिए उपयुक्त है। तो background-position: right bottom; के लिए आप भी background-position: 100% 100%; लिख सकते हैं और background-position: left top; परिणाम में background-position: 0 0;

भी इस पर W3C चश्मा पर एक नज़र ले जाएगा: http://www.w3.org/TR/css3-background/#the-background-position

ऊपर श्री की टिप्पणी करने के लिए: यह पूरी तरह से गलत है, left: 0px ; top:0px; पर उल्लेख है HTML तत्व खुद की स्थिति को जब position:relative या position:absolute का उपयोग कर

संपादित करें: यदि आप कई पृष्ठभूमि का उपयोग करना चाहते तो आप इसे इस प्रकार als नोट कर सकते हैं:

पार ब्राउज़र समर्थन के लिए http://caniuse.com/#feat=multibackgrounds पर

p[class] { 
    background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif"); 
    background-position: left top, right bottom; 
    background-repeat: no-repeat; 
} 

नज़र

स्वागत करती

टॉम

Answer 2

के बजाय background-position: bottom right को आजमाने के बारे में क्या?

Answer 3

ब्राउज़र समर्थन आप के लिए एक समस्या नहीं है, तो आप CSS3 के कई पृष्ठभूमि के साथ कर सकता है: http://www.css3.info/preview/multiple-backgrounds/