सीएसएस के साथ div में छवि को कैसे स्थानांतरित करें?

मेरे पास एक div के अंदर स्थित एक छवि है, मैं सब कुछ पूरा करने के लिए इसे 50 पीएक्स नीचे और 50 पीएक्स छोड़ने की कोशिश कर रहा हूं। लेकिन मुझे यकीन नहीं है कि सीएसएस में छवि को कैसे संपादित किया जाए क्योंकि मुझे नहीं पता कि फोटो को सीएसएस में जोड़ने के लिए कौन सा कोड डालना है।सीएसएस के साथ div में छवि को कैसे स्थानांतरित करें?

मेरे कोड:

#OverviewText4 img:MoneyIcon.png { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
}

<div id="OverviewText4"> 
 
    <img src="MoneyIcon.png" /> 
 
</div>

स्रोत

2016-12-05 Sid

उत्तर की भीड़ के अनुसार सीएसएस में ऐसा करने के कई तरीके हैं। अगर मैं सुझाव दे सकता है, के बाद से अपने उदाहरण में छवि नाम एक अलग दृष्टिकोण शास्त्र से संबंधित है:

#OverviewText4 { 
    position: relative; 
} 
#OverviewText4:before { 
    content: ""; 
    background: transparent url(MoneyIcon.png) scroll no-repeat 0 0; 
    background-size: cover; 
    width: 150px; 
    height: 150px; 
    position: absolute; 
    display: block; 
    top: 50px; 
    left: 50px; 
}

https://jsfiddle.net/zk8su1qw/

इस तरह आप भी HTML में एक img टैग, की आवश्यकता नहीं है जो वांछनीय अगर यह सिर्फ प्रस्तुतिकरण है।

इस उत्तर में एक धारणा भी है कि आप छवि के चारों ओर सामग्री प्रवाह करने के बजाय OverviewText4 div में किसी भी सामग्री के शीर्ष पर प्रदर्शित छवि चाहते हैं। यदि ऐसा नहीं है तो आप मार्जिन का उपयोग करना चाहते हैं और छवि position:static या relative रखना चाहते हैं।

स्रोत

2016-12-05 12:11:36 AndFisher

आप गद्दी के साथ ऐसा कर सकते हैं simpy की मदद करने

#OverviewText4 img { 
    padding:50px 0 0 50px; 
}

स्रोत

2016-12-05 11:13:17

अपने घोषणा से छवि का नाम निकालें और बनाने के लिए धन्यवाद सुनिश्चित करें कि आपका कंटेनरपर सेट हैताकि अपनी छवि को पूरी तरह से इस उदाहरण #OverviewText4

#OverviewText4 { 
    position: relative; 
} 

#OverviewText4 img { 
    width: 150px; 
    height: 150px; 
    position: absolute; 
    top: 50px; 
    left: 50px; 
}

स्रोत

2016-12-05 11:13:42 elmarko

यह उत्तर से संबंधित है जब भी स्थिति का उपयोग: पूर्ण, अच्छी प्रैक्टिस उपयोग की स्थिति है: माता-पिता के सापेक्ष..निस साथी !!! –

में सही युक्त तत्व के खिलाफ रखा जाता है अगर मैं अपने प्रश्न समझ में सही ढंग से तुम सब करने की है, तो अपने div जहां छवि स्थित है करने के लिए इस शैली को जोड़ने है।

div > img { 
    margin-top: 50px; 
    margin-left: 50px; 
}

स्रोत

2016-12-05 11:14:12 weinde

div एक वर्ग नहीं है, इसलिए आप ".div> img" नहीं लिख सकते हैं, लेकिन "div> img" – ElChupacabra

@ElChupacabra क्षमा करें मेरा बुरा ... टाइपो – weinde

@ElChupacabra पहले से ही मेरा उत्तर – weinde

एक तत्व के चारों ओर एक मार्जिन बनाने के लिए margin विशेषता का उपयोग करें। आप div तत्व पर padding का भी उपयोग कर सकते हैं।

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

#OverviewText4 img: MoneyIcon.png{ 
    width: 150px; 
    height: 150px; 
    position: absolute; 
    margin-top: 50px; 
    margin-left: 50px; 
}

स्रोत

2016-12-05 11:14:21 ggradnig

आप माता-पिता <div> को position:relative जोड़ने के लिए और फिर <img> को position: absolute; जोड़ने की है।

#OverviewText4{ 
 
    position: relative; 
 
} 
 

 
#OverviewText4 img{ 
 
    width: 150px; 
 
    height: 150px; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
}

<div id="OverviewText4"> 
 
    <img src="MoneyIcon.png" /> 
 
</div>

स्रोत

2016-12-05 11:14:39

आप द्वारा एक CSS वर्ग के लिए एक छवि लिंक कर सकते हैं टैग के अंदर वर्ग के नाम जोड़ने<img>

कार्य उदाहरण:: इस तरह

body { 
 
    background: #111 
 
} 
 
.OverviewText4 { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
}

<body> 
 
    <img src="MoneyIcon.png" class="OverviewText4" /> 
 
</body>

स्रोत

2016-12-05 11:15:17

ठीक है, आपका सीएसएस ठीक है लेकिन आपका चयनकर्ता नहीं है। मुझे लगता है कि यह वही है जो आप जा रहे थे।

#OverviewText4 img[src="MoneyIcon.png"] { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
}

<div id="OverviewText4"> 
 
    <img src="MoneyIcon.png" /> 
 
</div>

मैं img:MoneyIcon.png बदल दिया है जो एक img टैग जहां src = MoneyIcon मतलब है img[src="MoneyIcon.png"] (जो सीएसएस के लिए कुछ भी मतलब नहीं है)।

#OverviewText4 img.money-icon { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
}

<div id="OverviewText4"> 
 
    <img class="money-icon" src="http://placehold.it/150x150" /> 
 
</div>

मैं आप पाते हैं आशा: png

मुख्य समस्या यहाँ अगर आप src आप अपने सीएसएस भी बदलना होगा बदलने के लिए, मैं इस तरह एक वर्ग होने की सलाह देते हैं है यह सहायक है।

स्रोत

2016-12-05 11:20:06

यह सही है, लेकिन छवि, या फ़ाइल नाम/स्थान को बदलने के लिए कभी भी आवश्यक नहीं है। ध्यान देने योग्य। – AndFisher

@AndFisher मैंने थोड़ा और जोड़ा, धन्यवाद –

सीएसएस के साथ div में छवि को कैसे स्थानांतरित करें?

उत्तर

संबंधित मुद्दे