CSS สามารถแทรกภาพในภาพอีกที ได้ไหมครับ?

[Q(@3@)o]

CSS อ่ะ

เช่นนะ

เรามีรูป รูปนึง

แล้วจะเอารูป ดาว ไปอยู่ใน มุมซ้ายบนสุด ของภาพ ทำได้มะ?

ขอบคุณครับ

[barbies55]

ก็ให้รูปแรกเป็นพื้นหลังไงคะ แล้วก็ให้รูปดาวไปวางแบบ left

[youcanberich]

ประมาณนี้

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


<div id="image"> *// รูปแรกตั้งเป็นแบล็คกราวให้สไตล์นี้

<img src="http://www.domain.com/image/star.gif" width="34" height="34"> *//รูปสอง

</div>



[ab5olute]

ข้างบนถูกต้องครับ แต่ต้องเป็นภาพ png หรือ gif ที่เป็นพื้นหลังเป็นแบบ transparent นะครับ

แต่ png กะ ie ต้องใช้ javascipt ช่วยด้วย ถึงจะได้ แต่ถ้าเป็น gif จะได้เลย แต่ข้อเสียหรือ gif ภาพจะแตกๆๆ ไม่ชัด

[Q(@3@)o]

คืออยากได้เป็น CSS ไม่ก็ XHTML ใครพอรู้บ้างครับ

คือไม่โปร แต่อยากทำ T T

[Q(@3@)o]

หรือใครรู้คีย์เวิดในการเสริชบ้าง คือไม่รู้จะเสริชว่าไร -*-

[Kazamatsuri]

ใช้ z-index ครับ

http://www.quackit.com/css/properties/css_z-index.cfm

ตัวอย่างอีกเวบที่มันมีหลาย ๆแบบผมหาไม่เจอแล้วอ่ะครับ 

หรือจะใช้แบบที่ท่าน snowball926 บอกไว้ก็ได้นะครับ

[yokey.]

อีกที่นะครับ

http://www.mandarindesign.com/opacity.html

[Q(@3@)o]

ได้นะ แต่ได้แค่ภาพเดียว

ถ้าผม จะทำรูปขนาด 100x150 เรียงๆกันหลายๆรูป (แกลอรี่)
และมีรูปดาว อยู่มุมซ้ายบนสุด ทุกรูป

โดยให้โค๊ดมีระเบียบตามแบบ CSSหรือXHTML

ทำไงเนี้ย

งมมา 3 ชั่วโมงละ แก้โค๊ดอย่างไงก็ไม่ได้ -*-

ช่วยหน่อยนะครับ ขอบคุณจ้า

[Kazamatsuri]

จะซ้อนกันกี่ชั้นล่ะครับ

สร้างแบบนี้เลยครับ

img {
   position: absolute;
}

.layer1 {
   top: 10px;
   left: 20px;
   z-index: 1;
}

.layer2 {
   top: 20px;
   left: 40px;
   z-index: 2;
}

.layer3 {
   top: 30px;
   left: 60px;
   z-index: 3;
}

.layer4 {
   top: 40px;
   left: 80px;
   z-index: 4;
}

เวลาสร้างรูปขึ้นมาก็ประมาณนี้

<img src="zzz" width="xx" height="yy" class="layer1"> อันนี้เปรียบเสมือนเป็น background
<img src="zzz" width="xx" height="yy" class="layer2"> ชั้นนี้จะอยู่ถัดจาก backgound
<img src="zzz" width="xx" height="yy" class="layer3">
<img src="zzz" width="xx" height="yy" class="layer4"> อันนี้อยู่บนสุดครับ


จะเอาหยาบ ๆก็แบบนี้

img {
   position: absolute;
}

<img src="zzz" width="xx" height="yy" style="z-index:1; top: 10px; left: 20px;" >
<img src="zzz" width="xx" height="yy" style="z-index:2; top: 20px; left: 40px;" >
<img src="zzz" width="xx" height="yy" style="z-index:3; top: 30px; left: 60px;" >
<img src="zzz" width="xx" height="yy" style="z-index:4; top: 40px; left: 80px;" >

[Q(@3@)o]

แค่ 2 ชั้นอ่ะครับ คือรูป กับ รูปดาว บนมุมของรูป

แต่ผมต้องการจะให้ มันมีหลายๆชุดอ่ะ -*- (พอเข้าใจป่ะ)

อะครับรูปตัวอย่าง


และอยากให้โค๊ดภายในดูมีระเบียบด้วยอ่ะครับ

ขอบคุณครับที่ช่วย ช่วยทีน่า^^

[Kazamatsuri]

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


#content {
width: 900px;
}
.column {
float: left;
position: relative;
width: 300px;
}
.toplayer {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}


<div id="content">
<div class="column">
<img src="aaa" width="xx" height="yy" />
<img src="bbb" width="xx" height="yy" class="toplayer" />
</div>
<div class="column">
<img src="aaa" width="xx" height="yy" />
<img src="bbb" width="xx" height="yy" class="toplayer" />
</div>
<div class="column">
<img src="aaa" width="xx" height="yy" />
<img src="bbb" width="xx" height="yy" class="toplayer" />
</div>
</div>


ขนาด column กับ content ปรับให้มันพอดีกันอ่ะครับ ไม่งั้นมันจะตกหน้าได้
ขนาดความกว้างของ column รวมกันแล้วต้องไม่เกิน content นะครับ

มันก็ประมาณเนี้ย ลอง ๆไปปรับต่อเอาล่ะกันครับ

[desiger]

แจ่มเลยครับ เก็บเปงความรู้ดีเรย

[Q(@3@)o]

เย้ๆๆๆๆๆๆ ได้แล้ว จุ๊บทีครับ


ขอบคุณมากๆนะคร๊าบบบบบบบบบบบ คุณ Kazamatsuri

จะไม่ลืมพระคุณเลย ^^ 

[Kazamatsuri]

เง้อ ผมไม่ใช่เกย์ ไม่ต้องจุ๊บผมก็ได้นะ 

[Q(@3@)o]

http://www.poxline.com

ใช้กับเวปนี้อ่ะนะ ^^ กว่าจะได้ ล่อไปเกือบวัน   

Thank หลายๆ

[Q(@3@)o]

แห่มๆ ถ้าว่างๆก็ช่วยดูโค๊ด +CSS ให้หน่อย

ว่ามีทางที่จะย่อ และจัดระเบียบโค๊ด ได้กว่านี้อีกไหม เพราะรู้สึกว่าใช้ DIV กับ ฟังชั่นนี้ทุกรูปเลยอ่ะ -*-

[Kazamatsuri]

ไม่แน่ใจนะครับ แต่ลองเปลี่ยนจาก div ให้ไปอยู่ใน li สิครับ ไม่ค่อยชัวร์เท่าไร

แต่โค๊ดส่วนที่ลดได้คือ img ครับ border="0" แปลงไปอยู่ในรูป css ได้ครับ

img { border: 0;}

นอกนั้นผมว่ามันก็โอเคแล้วนะ ท่านอื่นว่าไงมั่งล่ะ

[Q(@3@)o]

ครับ ขอบคุณมากๆนะครับ น้ำใจงามจริงๆ

เด๋วจะลองดูเด้อ