छवि को टेक्स्ट के पीछे जाएं और इसे सीएसएस

का उपयोग करके केंद्र में रखें, मैं एक वेबपृष्ठ बना रहा हूं, जहां मेरे पास एक छवि है, जिसे मैं केंद्र में रखना चाहता हूं और फिर उस छवि के शीर्ष पर मैं इनपुट रखना चाहता हूं बक्से और लेबल और सबमिट बटन।छवि को टेक्स्ट के पीछे जाएं और इसे सीएसएस

मैं सीएसएस

img.center 
{ 
    z-index:-1; 
}

उपयोग करने के लिए कोशिश कर रहा हूँ, लेकिन यह नहीं है काम करता है। और जब मैं

img.center 
{ 
    position:absolute; 
    left:0px; 
    top:0px; 
    z-index:-1; 
}

लिए कोड बदलने यदि छवि के पीछे जाने के लिए, लेकिन तब के रूप में मैं left:0px और top:0px इस्तेमाल किया ... यह शहर की 0,0 पर छवि डालता है .. लेकिन मैं छवि रहना चाहता हूँ बीच में।

केंद्र में छवि रखने के लिए मेरे पास <div align="center"> टैग है।

वैसे भी है, मैं छवि को केंद्र में रख सकता हूं और इसे पीछे भी बना सकता हूं ???

मेरे .html पेज इस तरह दिखता है: (मैं अपने div टैग के लिए एक पृष्ठभूमि छवि करने की कोशिश की थी, लेकिन कोई छवि वहाँ पर दिखाई दे रहा है)

<html> 
<head> 
<title>Question of the Week</title> 
<style type="text/css"> 
    body 
    { 
     background-image:url('images/background.jpg'); 
     background-repeat:repeat-x; 
    } 

    .container 
    { 
    background-image:url('images/center.jpg'); 
    background-repeat:no-repeat; 
    } 
    td.cntr {padding-top:50px;} 
</style> 
</head> 
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> 

    <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td><div align="left"><img src="images/logo.jpg"></div></td> 
        <td></td> 
        <td><div align="right"><img src="images/right_logo.jpg"></div></td></tr> 
      </table> 
     </tr> 
     <tr> 
      <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td class="cntr"> 
         <div id="container"> 
          <input name="box" type="textbox" /> 
          <input name="box" type="textbox" /> 
          <input name="submit" type="submit" /> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </tr> 
    </table> 
</body> 
</html>

स्रोत

2009-07-07 Zeeshan Rang

आप HTML स्रोत बता सकते हैं? एचटीएमएल कैसे स्थापित किया गया है, इस पर एक बड़ा प्रभाव डालेगा कि सीएसएस क्या आवश्यक है। –

ठीक है, अपनी छवि को अपनी वेबसाइट/कंटेनर के पीछे के मैदान में रखें और जो कुछ भी आप चाहते हैं उसे रखें। इसलिए कहते हैं कि तुम है:

<div id="container"> 
    <input name="box" type="textbox" /> 
    <input name="box" type="textbox" /> 
    <input name="submit" type="submit" /> 
</div>

यह अपने कोड में होना है और आप सीएसएस दिखाई देगा:

#container { 
    background-image:url(yourimage.jpg); 
    background-position:center; 
    width:700px; 
    height:400px; 
}

इस यद्यपि, आप ऊंचाई और चौड़ाई निश्चित मूल्यों के लिए निर्दिष्ट होना चाहिए काम करने के लिए (यानी कोई% नहीं) यदि आपको इसकी आवश्यकता है तो मैं आपको अधिक विशेष रूप से मदद कर सकता हूं, लेकिन मुझे और जानकारी चाहिए।

स्रोत

2009-07-07 18:39:24 Mike

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

body {z-index:0} 
img.center {z-index:-1; margin-left:auto; margin-right:auto}

ऑटो के लिए छोड़ दिया & सही मार्जिन की स्थापना अपनी छवि केंद्रित हो जाएगा।

स्रोत

2009-07-07 18:26:13

आपको नकारात्मक जेड-इंडेक्स का उपयोग नहीं करना चाहिए क्योंकि सभी ब्राउज़र ठीक से इसका समर्थन नहीं करते हैं। –

आप छवि और टेक्स्ट दोनों को position:absolute या position:relative के साथ स्थिति दे सकते हैं। फिर z-index property काम करेगा। जैसे

#sometext { 
    position:absolute; 
    z-index:1; 

} 
image.center { 
    position:absolute; 
    z-index:0; 
}

जो भी तरीका आप इसे केन्द्रित करना चाहते हैं उसका उपयोग करें।

एक और विकल्प/हैक छवि को पृष्ठभूमि को बनाने के लिए है, या तो पूरे पृष्ठ पर या बस टेक्स्ट बॉक्स में।

स्रोत

2009-07-07 18:30:34 anderstornvig

यह एक पृष्ठभूमि छवि है कि केन्द्रित किया गया है।

.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;} 

<div class="wrapper"> 
...input boxes and labels and submit button here 
</div>

स्रोत

2009-07-07 18:34:59 Emily

मैंने आपके कोड की कोशिश की .. लेकिन यह काम नहीं किया। मैंने अपने प्रश्न को मेरे कोड के साथ संपादित किया है .. क्या आप इसे देख सकते हैं ... फिर –

आपके पास id = 'कंटेनर' है लेकिन क्लाइंट के लिए है। कंटेनर का उपयोग कर रहे हैं। या तो सीएसएस में एचटीएमएल या # कंटेनर में वर्ग = 'कंटेनर' का उपयोग करें। आप पृष्ठभूमि-स्थिति भी खो रहे हैं: सीएसएस में केंद्र। आप उपरोक्त मेरे उदाहरण में एक ही पंक्ति में सभी पृष्ठभूमि सीएसएस डाल सकते हैं। – Emily

शर्म आपको इस पर संक्षिप्त रूप से बदला गया है): –

0 से शुरू करें और -1 का उपयोग करने के बजाय वहां से ऊपर जाएं। उदाहरण के लिए, अपने इनपुट और लेबल्स को 100 के जेड-इंडेक्स में विभाजित करें, और उस छवि को दें जो आप इसके पीछे 50 के जेड-इंडेक्स को रखना चाहते हैं।

वैकल्पिक रूप से बस छवि को पृष्ठभूमि-छवि के रूप में सेट करें इनपुट और लेबल युक्त div का। चूंकि छवि शायद चित्रकारी है और इसलिए प्रस्तुतिकरण है, इसलिए इसे वास्तव में वास्तविक आईएमजी तत्व होने की आवश्यकता नहीं है।

स्रोत

2009-07-07 18:35:26 Rahul

इसे संभालने के दो तरीके हैं।

पृष्ठभूमि छवि
का उपयोग सीएसएस

पृष्ठभूमि छवि के z- सूचकांक संपत्ति शायद आसान है। आपको कहीं निश्चित चौड़ाई की आवश्यकता है।

.background-image { 
    width: 400px; 
    background: url(background.png) 50% 50%; 
}

<div class=".background-image"><form></form></div>

स्रोत

2012-04-04 20:16:13

छवि को टेक्स्ट के पीछे जाएं और इसे सीएसएस

उत्तर

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