सीएसएस के माध्यम से पाठ के बाईं ओर छवि जोड़ें

Question

मैं सीएसएस के माध्यम से कुछ पाठ में एक छवि कैसे जोड़ सकता हूं?

मुझे यह मिल गया है:

<span class="create">Create something</span>

और मैं सीएसएस का उपयोग करके उस के बाईं ओर एक 16x16 छवि जोड़ना चाहता हूं। क्या यह संभव है या क्या मुझे इस चित्र को मैन्युअल रूप से जोड़ना चाहिए जैसे:

<span class="create"><img src="somewhere"/>Create something</span>

बल्कि मुझे उन सभी स्थानों को मैन्युअल रूप से बदलना नहीं पड़ेगा, जो मैं इसे सीएसएस के माध्यम से करना चाहता था।

धन्यवाद!

Answer 1

.create
{
background-image: url('somewhere.jpg');
background-repeat: no-repeat;
padding-left: 30px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

जब तक आप अपना इच्छित परिणाम प्राप्त नहीं कर लेते, पैडिंग और संभवतः मार्जिन के साथ खेलें। आप बैकग्राउंड इमेज (* nod to Tom Wright) की स्थिति को "बैकग्राउंड-पोजिशन" या "बैकग्राउंड" ( w3 से लिंक ) की पूरी तरह से परिभाषा के साथ भी खेल सकते हैं ।

Comments

छवि की स्थिति निर्दिष्ट करना चाह सकते हैं। लेकिन अन्यथा, अच्छी कॉल।

— टॉम राइट

यदि आप यह सुनिश्चित करते हैं कि चित्र को लंबवत रूप से फिट करने के लिए लाइन-हाइट काफी बड़ा है, तो आप ब्लॉक करने के लिए डिस्प्ले प्रॉपर्टी को सेट करने से शायद बच सकते हैं, अन्यथा आप संभवतः इसे काट लेंगे और इसे ब्लॉक एलिमेंट में बनाना चाहते हैं।

— ज़ैक द ह्यूमन

आप दो पहली पंक्तियों के बजाय अनुकूलित विकल्प का उपयोग कर सकते हैं: पृष्ठभूमि: url ('कहीं.जेपीजी') नो-रिपीट;

— एलेक्सिस गामरा

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

— विवियन नदी

Answer 2

बहुत ही सरल विधि:

.create:before {
content: url(image.png);
}

सभी आधुनिक ब्राउज़रों और IE8 + में काम करता है।

संपादित करें

हालांकि बड़ी साइटों पर इसका इस्तेमाल न करें। The: प्रदर्शन से पहले छद्म तत्व भयानक है।

Answer 3

कुछ इस तरह का प्रयास करें:

.create
 { 
  margin: 0px;
  padding-left: 20px;
  background-image: url('yourpic.gif');
    background-repeat: no-repeat;

}

Comments

लेकिन नहीं दोहराना

— Traingamer

width:2em; background-size: contain;छवि के आकार को सीमित करने के लिए जोड़ना बहुत उपयोगी हो सकता है।

— डेमियन ग्रीन

Answer 4

यह बहुत अच्छा काम करता है

.create:before{
    content: "";
    display: block;
    background: url('somewhere.jpg') no-repeat;
    width: 25px;
    height: 25px;
    float: left;
}

Comments

आप इसे विस्तृत कर सकते हैं, हालांकि यह क्यों काम करता है। उसका कोड क्यों नहीं आया आदि

— यजी जूल

क्या इसमें कुछ होना चाहिए url()?

— डैरेन कुक

@ डेरेन कुक - पता नहीं आप व्यंग्य कर रहे हैं या नहीं, वैसे भी आपको अपनी छवि के लिए यूआरएल वहाँ डालनी होगी।

— जियोवन्नी

@ गोवन्नी व्यंग्य नहीं! मैंने सिर्फ यह स्पष्ट करने के लिए उत्तर संपादित किया कि यह जानबूझकर खाली नहीं छोड़ा गया था।

— डैरेन कुक

Answer 5

पाठ से पहले पृष्ठभूमि आइकन जोड़ने के लिए जब पाठ की लंबाई पहले से ज्ञात नहीं होती है।

.create:before{
content: "";
display: inline-block;
background: #ccc url(arrow.png) no-repeat;
width: 10px;background-size: contain;
height: 10px;
}