[Tutorial HTML] การทำให้ตารางเกิด opacity
posted on 15 Feb 2007 01:18 by rije in HTML
สวัสดีครับ ^^ ห่างหายไปเสียนานกับ Tutorial
วันนี้ยก entry นี้ให้กับ HTML ครับ
หลายๆ คนคงจะเคยคิดว่าทำ opacity กับภาพยังไง
โดยที่ภาพยังคงมี opacity 100% เหมือนเดิม
คิดว่าน่าจะสงสัยกัน (หรืองงที่ผมพูดกันแน่ 55)
--------------------------------------------------------
Tutorial : HTML
Title : การทำ opacity ในตารางให้มองเห็นพื้นด้านหลัง
++++++++++++++++++++++++++++
จากภาพเริ่มต้นด้วยภาพนี้ (ฮุฮุ)
จะเห็นว่าภาพมีความคมชัด 100% และไม่ได้ทำให้ภาพเป็น opacity
=======================================
ต่อไปผมสร้างไฟล์ภาพแบบ PNG โดยมีขนาด 1x1 pixel เท่านั้น
วิธีการสร้าง เริ่มแรกสร้างชิ้นงานใน Photoshop ก่อนนะครับ
สร้าง Layer ขึ้นมาใหม่ ลบ Layer Background ออก
หากเซ็ตค่าเป็น Transparent ไว้ก็ไม่ต้องลบ Layer นะครับ
จากนั้น ใส่สีขาวลงไปที่ Layer แล้วเซ็ตค่า Opacity ที่อยู่บน
Layers (F7) ให้มีค่าลดลง ผมเซ็ตไว้ที่ 25% จากนั้น save
ให้เลือกนามสกุลไฟล์เป็น PNG นะครับ
จะเห็นภาพข้างบนเป็นสีเทา ที่จริงแล้วภาพนี้เป็นสีขาวครับ
และมีขนาด 1x1 pixel ตามจริง นี่ผมเพิ่มเป็น 50x50 และ
ใส่พื้นหลังสีดำลงไป จะเห็นได้ว่าเกิดสีพื้นขึ้นด้านหลังภาพ
เพราะผมเซ็ตค่า opacity ลงไป เลยทำให้มองเห็นสีพื้นด้านหลัง
ทะลุผ่านภาพสีขาวที่มี Opacity 25% ครับ
เมื่อผมเอาไปใส่ในตาราง โดยเซ็ตให้เป็น background
โดยพื้นหลังตารางคือภาพด้านบน จะเป็นเช่นนี้ครับ
จากตารางข้างบนจะเห็นว่า ผมเซ็ตตารางใหญ่ให้มีพื้นหลังเป็นภาพ
และเซ็ตตารางเล็กด้านในด้วยภาพพื้นหลังสีขาว opacity 25%
ซึ่งเมื่อวางซ้อนกันอยู่ก็จะเป็นเช่นนี้ครับ จะเห็นว่า เรายังมองเห็น
พื้นหลังอยู่ แต่ไม่เข้มเท่าแบบเดิม ในภาพพื้นหลังสีขาวที่เซ็ตค่า
opacity ไว้สามารถเปลี่ยนเป็นสีอื่นนอกจากสีขาวก็ได้เช่นกันครับ
<table background="ที่อยู่ภาพพื้นหลัง" width="" height="">
<tr><td>
<table background="ที่อยู่ภาพที่เซ็ตค่า opacity" width="" height="">
<tr><td></td></table>
</td></tr>
</table>
ด้านบนเป็นโค้ดที่ผมใช้ครับ ^^
........................................................................
ก็ลองเอาไปปรับใช้กันดูนะครับ
Credit Idea : ให้เพื่อนผมครับ (จำไม่ได้ว่าโทรคุยกับใครเรื่องนี้)
แล้วพบกัน entry หน้าครับ ^_^
วันนี้ยก entry นี้ให้กับ HTML ครับ
หลายๆ คนคงจะเคยคิดว่าทำ opacity กับภาพยังไง
โดยที่ภาพยังคงมี opacity 100% เหมือนเดิม
คิดว่าน่าจะสงสัยกัน (หรืองงที่ผมพูดกันแน่ 55)
--------------------------------------------------------
Tutorial : HTML
Title : การทำ opacity ในตารางให้มองเห็นพื้นด้านหลัง
++++++++++++++++++++++++++++
จากภาพเริ่มต้นด้วยภาพนี้ (ฮุฮุ)
จะเห็นว่าภาพมีความคมชัด 100% และไม่ได้ทำให้ภาพเป็น opacity
=======================================
ต่อไปผมสร้างไฟล์ภาพแบบ PNG โดยมีขนาด 1x1 pixel เท่านั้น
วิธีการสร้าง เริ่มแรกสร้างชิ้นงานใน Photoshop ก่อนนะครับ
สร้าง Layer ขึ้นมาใหม่ ลบ Layer Background ออก
หากเซ็ตค่าเป็น Transparent ไว้ก็ไม่ต้องลบ Layer นะครับ
จากนั้น ใส่สีขาวลงไปที่ Layer แล้วเซ็ตค่า Opacity ที่อยู่บน
Layers (F7) ให้มีค่าลดลง ผมเซ็ตไว้ที่ 25% จากนั้น save
ให้เลือกนามสกุลไฟล์เป็น PNG นะครับ
จะเห็นภาพข้างบนเป็นสีเทา ที่จริงแล้วภาพนี้เป็นสีขาวครับ
และมีขนาด 1x1 pixel ตามจริง นี่ผมเพิ่มเป็น 50x50 และ
ใส่พื้นหลังสีดำลงไป จะเห็นได้ว่าเกิดสีพื้นขึ้นด้านหลังภาพ
เพราะผมเซ็ตค่า opacity ลงไป เลยทำให้มองเห็นสีพื้นด้านหลัง
ทะลุผ่านภาพสีขาวที่มี Opacity 25% ครับ
เมื่อผมเอาไปใส่ในตาราง โดยเซ็ตให้เป็น background
โดยพื้นหลังตารางคือภาพด้านบน จะเป็นเช่นนี้ครับ
|
|
จากตารางข้างบนจะเห็นว่า ผมเซ็ตตารางใหญ่ให้มีพื้นหลังเป็นภาพ
และเซ็ตตารางเล็กด้านในด้วยภาพพื้นหลังสีขาว opacity 25%
ซึ่งเมื่อวางซ้อนกันอยู่ก็จะเป็นเช่นนี้ครับ จะเห็นว่า เรายังมองเห็น
พื้นหลังอยู่ แต่ไม่เข้มเท่าแบบเดิม ในภาพพื้นหลังสีขาวที่เซ็ตค่า
opacity ไว้สามารถเปลี่ยนเป็นสีอื่นนอกจากสีขาวก็ได้เช่นกันครับ
<table background="ที่อยู่ภาพพื้นหลัง" width="" height="">
<tr><td>
<table background="ที่อยู่ภาพที่เซ็ตค่า opacity" width="" height="">
<tr><td></td></table>
</td></tr>
</table>
ด้านบนเป็นโค้ดที่ผมใช้ครับ ^^
........................................................................
ก็ลองเอาไปปรับใช้กันดูนะครับ
Credit Idea : ให้เพื่อนผมครับ (จำไม่ได้ว่าโทรคุยกับใครเรื่องนี้)
แล้วพบกัน entry หน้าครับ ^_^
Tags: html, opacity, tutorial9 Comments
ขอบคุณที่ทำ link ให้เว็บเรานะ
ว่าแต่คำสั่งนี้ใช้กับบล๊อกนี้ได้ด้วยป่าวหว่า? งงๆกับภาษาที่ใช้เขียนบล๊อกอันนี้หงะ เคยแต่ใช้ html (แต่ไม่ได้แตะมานาน) อืม... ไว้มีเวลาเปลี่ยนตีมจะลองงมอีกที
#1 By \•Milo Studio•/ on 2007-02-15 02:52