[CSS] ทำยังไงถึงเอา text ไปไว้บนรูปได้

[GillBate]

  ครับ พอดีเอารูปขึ้น แล้วจะเอา div ที่ใส่ text ไปไว้ข้างบน แต่มันกลับไปอยู่หลังภาพอ่ะครับ พอจะทำภาพเป็น background ภาพก็หายไปเฉยเลย

[Twenty-One]

ทำแบบนี้สิครับ

โค้ด เลือก ขยาย

<div style="background-image: url(background.gif);height:200px; width: 00px;">Text Here</div>

ใช้ z-index ก็ได้ครับ ถ้าจะทำเป็น div ซ้อน div อะไรนั้น

[GillBate]

ทำแบบนี้สิครับ

โค้ด เลือก ขยาย

<div style="background-image: url(background.gif);height:200px; width: 00px;">Text Here</div>

ใช้ z-index ก็ได้ครับ ถ้าจะทำเป็น div ซ้อน div อะไรนั้น

ภาพจาก div ข้างล่างมันไหนขึ้นมาซอนอ่ะครับ

โค้ด เลือก ขยาย

<div id="secondaryContent">
<div style="position:relative; left:-14px; top:-20px;"><img src='images/statusside.png' /></div>     
<div style="position:relative; left:-14px; top:-20px;"><img src='images/menuhead.png' alt="w" /></div>
<div style="position:relative; left:-14px; top:-25px; background:url(images/menubody.png) repeat; white-space:normal;"><span style="position:relative; padding:0 0 0 19; left:50px;">

  <li><a href="news.php">Anouncement</a></li>
  <li><a href="profile.php">Player's profile</a></li>
  <li><a href="mail.php">Mail(0)</a></li>
  <li><a href="battle.php">Battle field</a></li>
  <li><a href="tournament.php">Tournament</a></li>
  <li><a href="team.php">Team fighting</a></li>
  <li><a href="guild.php">My guild</a></li>
  <li><a href="explore.php">Explore planet</a></li>
  <li><a href="blacksmith.php">Blacksmith</a></li>
  <li><a href="market.php">Market</a></li>
  <li><a href="preference.php">Preference</a></li>
  <li><a href="donation.php">Donation</a></li>
  <li><a href="betainfo.php">Beta status</a></li>
  </span></div>
<div style="position:relative; left:-14px; top:-25px;"><img src='images/menubottom.png' alt="w" /></div>

    </div>

statusside.png อันนี้อ่ะครับ อยากให้ตัวหนังสือขึ้นไปทับ

[kitazawa1st]

โค้ด เลือก ขยาย


<div style="position:relative; left:-14px; top:-20px;">
 <div style="position:absolute;top:0px;left:0px;z-index:100;"><img src='images/statusside.png' /></div>
 <div style="position:absolute;top:0px;left:0px;z-index:200;">Text Text Text Text Text</div>
</div>  


ลองดูนะครับ ใช้ absolute ภายใน reletive ครับ แล้วกำหนด z-index ให้มันอีกที

[GillBate]

โค้ด เลือก ขยาย


<div style="position:relative; left:-14px; top:-20px;">
 <div style="position:absolute;top:0px;left:0px;z-index:100;"><img src='images/statusside.png' /></div>
 <div style="position:absolute;top:0px;left:0px;z-index:200;">Text Text Text Text Text</div>
</div>  


ลองดูนะครับ ใช้ absolute ภายใน reletive ครับ แล้วกำหนด z-index ให้มันอีกที

เยี่ยมเลยครับ วางไว้บนตัวหนังสือได่จริงๆ
แต่ว่า div ข้างล่างมันไหลเข้าไปซ่อนด้านหลังภาพ statusside.png อ่ะครับ แก้ยังไงต่อ

[เทพบุตรแองเจิ้ล]

ใช้โปรแกรมตัดแต่งภาพ เขียนตัวหนังสือทับเลยครับ อิอิ ง่ายดี   

[deadclosed]

โค้ด เลือก ขยาย


<div style="position:relative; left:-14px; top:-20px;">
 <div style="position:absolute;top:0px;left:0px;z-index:100;"><img src='images/statusside.png' /></div>
 <div style="position:absolute;top:0px;left:0px;z-index:200;">Text Text Text Text Text</div>
</div>  


ลองดูนะครับ ใช้ absolute ภายใน reletive ครับ แล้วกำหนด z-index ให้มันอีกที

เยี่ยมเลยครับ วางไว้บนตัวหนังสือได่จริงๆ
แต่ว่า div ข้างล่างมันไหลเข้าไปซ่อนด้านหลังภาพ statusside.png อ่ะครับ แก้ยังไงต่อ

ทำแบบนี้เดี่ยวพอไปเทสก่ะพวกต่างบราวเซอร์มีปัญหาอีก
นับหนุน
<div style="background-image: url(background.gif);height:200px; width: 00px;">Text Here</div>
แบบนี้มากกว่า
หรือทำแบบนี้
<div class="nameclass">
text text
</div>

ไฟล์ cssแยกออกมาต่างหาก
.nameclass{
     margin:0;
     padding:0;
     background:url('background.jpg') no-repeat left top #fff;
     width: ....px;
     height:....px;     
}

[GillBate]

ใช้โปรแกรมตัดแต่งภาพ เขียนตัวหนังสือทับเลยครับ อิอิ ง่ายดี   

ไม่ได้หรอกครับ เพราะตัวหนังสือมันต้องเปลี่ยนตลอด

[wat007]

โค้ด เลือก ขยาย


<div style="position:relative; left:-14px; top:-20px;">
 <div style="position:absolute;top:0px;left:0px;z-index:100;"><img src='images/statusside.png' /></div>
 <div style="position:absolute;top:0px;left:0px;z-index:200;">Text Text Text Text Text</div>
</div>  


ลองดูนะครับ ใช้ absolute ภายใน reletive ครับ แล้วกำหนด z-index ให้มันอีกที

เยี่ยมเลยครับ วางไว้บนตัวหนังสือได่จริงๆ
แต่ว่า div ข้างล่างมันไหลเข้าไปซ่อนด้านหลังภาพ statusside.png อ่ะครับ แก้ยังไงต่อ

ทำแบบนี้เดี่ยวพอไปเทสก่ะพวกต่างบราวเซอร์มีปัญหาอีก
นับหนุน
<div style="background-image: url(background.gif);height:200px; width: 00px;">Text Here</div>
แบบนี้มากกว่า
หรือทำแบบนี้
<div class="nameclass">
text text
</div>

ไฟล์ cssแยกออกมาต่างหาก
.nameclass{
     margin:0;
     padding:0;
     background:url('background.jpg') no-repeat left top #fff;
     width: ....px;
     height:....px;     
}

อันนี้ดูดีแฮะ ขอเก็บไปใช้