ทุกแท็กใน HTML สามารถใส่สีหรือรูปเป็นพื้นหลังได้ เช่น <body>, <table>,
<font>, <butt0n>, <textarea>, <span>, <p>,
<div> เป็นต้น แต่การกำหนดรูปแบบด้วย HTML อย่างเดียวไม่พอ ต้องนำสไตล์ชีตมาช่วยด้วย
background-image:url
เป็นคุณสมบัติที่ใช้กำหนดพื้นหลังรูปภาพ
โดยระบุเส้นทางและชื่อไฟล์ใน url เช่น
background01.htm
<html><head>
<style type="text/css>
body {background-image:url('picture/bg01.jpg')}
textarea {background-image:url('picture/bg02.jpg')}
</style>
</head>
<body><textarea>ทดสอบสไตล์ background-image</textarea></body>
</html>
จะกำหนดสไตล์ล่วงหน้าที่แท็ก <head> ฉะนั้นในแท็กอื่นๆ ของเอกสาร HTML ทุกแท็กจะใช้สไตล์นี้ทั้งหมด
background02.htm
<html>
<body style="background-image:url('picture/bg01.jpg')”>
<textarea style=”background-image:url('picture/bg02.jpg')">ทดสอบสไตล์ backgroundn-image</textarea>
</body>
</html>
เป็นสไตล์เฉพาะตัวของแท็กนั้น ไม่มีผลกับแท็กอื่น
background-color:
เป็นการกำหนดคุณสมบัติของสีพื้นหลัง โดยใช้ชื่อสี เช่น black, blue
หรือรหัสเลขฐานสิบหก เช่น #0000ff หรือรหัสเลขฐานสิบ เช่น rbg(0,0,255) เป็นต้น
รูปแบบการใช้งาน
background-color:back
|
ใช้ชื่อสีเป็นภาษาอังกฤษ
|
background-color:#0000ff
|
ใช้รหัสเลขฐานสิบหก
|
background-color:rgb(0,255,0)
|
ใช้รหัสเลขฐานสิบ
|
background-color:rgb(0%,100%,0%)
|
ใช้รหัสเลขฐานสิบแบบคิดเป็นเปอร์เซ็นต์
|
การโหลดไฟล์ HTML ของบราวเซอร์จะโหลดสีพื้นหลังก่อนเสมอ
background-attachment:
เป็นคุณสมบัติที่ใช้ยึดพื้นหลังมีค่าที่เป็นไปได้คือ fixed ค่านี้จะช่วยให้ภาพพื้นหลังอยู่ตำแหน่งเดิมเมื่อเราเลื่อนหน้าเพจ และอีกค่า คือ scroll ค่านี้จะทำให้ภาพเลื่อนตามเนื้อหาของเพจ ปกติจะกำหนดเป็นค่า scroll
background-attachment:fixed
|
background-repeat:
เป็นคุณสมบัติในการแสดงภาพซ้ำ
รูปแบบการใช้งาน
background-repeat:repeat
|
แสดงภาพเต็มพื้นที่
|
background-repeat:repeat-x
|
แสดงภาพซ้ำในแนวนอน
|
background-repeat:repeat-y
|
แสดงภาพซ้ำในแนวตั้ง
|
background-repeat:no-repeat
|
แสดงภาพเพียงภาพเดียว
|
background-position:
ใช้กำหนดพิกัดหรือตำแหน่งของภาพ เพื่อใช้ในการวางรูปพื้นหลัง สามารถกำหนดได้ดังนี้
top left
|
กำหนดตำแหน่งตามความหมายคำศัพท์ เช่น center
center คือตรงกลวงหน้าจอ (ถ้ากำหนดแค่คีย์เวิร์ดแรกไม่กำหนดคีย์เวิร์ดตัวที่สอง จะถือว่าคีย์เวิร์ดตัวที่สองเป็น center เสมอ เช่น top
จะหมายถึง top center)
|
top center
|
|
top right
|
|
center left
|
|
center center
|
|
center right
|
|
bottom left
|
|
bottom center
|
|
bottom right
|
|
x-%
y-%
|
กำหนดตำแหน่งเป็นเปอร์เซ็นต์ โดยมุมบนซ้ายของเอกสารจะเป็นตำแหน่ง 0%
0% มุมล่างขวาจะเป็น 100% 100% และตรงกลางจะเป็น 50%
50% (ถ้าใส่ค่าแรกค่าเดียวค่าที่สองจะเป็น 50% เสมอ)
|
x-pos
y-pos
|
กำหนดตำแหน่งเป็นตัวเลขเจาะจง เช่น 0
0 คือมุมบนซ้าย ส่วนล่างขวาไม่สามารถเจาะจงได้ เพราะขึ้นอยู่กับขนาดจอบนบราวเซอร์ และเราสามารถผสมระหว่างตัวเลขกับเปอร์เซ็นต์
หรือคำศัพท์กับตัวเลขก็ได้ เช่น top 250
|
รูปแบบการกำหนดค่า
background-position:top
|
ภาพจะอยู่ตำแหน่ง top center
|
background-position: 50% 0%
|
ภาพจะอยู่ตำแหน่ง 50% แกน x
และ 0% แกน y
|
background-position:right 150px
|
ภาพจะอยู่ตำแหน่ง 100% แกน c
และ 150px แกน y
|
กรณีกำหนดค่าติดลบ หมายถึงให้ภาพพื้นหลังหลุดขอบไปทางซ้ายหรือข้างบนของขอบเวบ หรือหากมีแท็กพ่อครอบอยู่นั้นหมายถึงหลุดจอบของแท็กพ่อตามจำนวนที่กำหนด เช่น
background-position: 150px -50px นับจากทางขวาที่ตำแหน่งมุมบนซ้าย นับเพิ่มไปอีก 150 จุดสี แล้วจึงเริ่มวางภาพ (px=pixel
หรือ จุด)
ในสไตล์ไม่ว่าจะเป็นการกำหนดระยะห่าง หรือขนาดความกว้าง ความยาว ก็จะใช้หน่วยวัดระยะเหมือนกันดังนี้
หน่วย
|
ความหมาย
|
%
|
แสดงระยะหรือขนาดเป็นเปอร์เซ็นต์ เช่น 50%
|
in
|
แสดงระยะหรือขนาดเป็นนิ้ว
|
cm
|
แสดงระยะหรือเป็นเซ็นติเมตร
|
mm
|
แสดงระยะหรือขนาดเป็นมิลลิเมตร
|
em
|
แสดงระยะหรือขนาดเป็น em (1em = 1 เท่าของขนาดตัวอักษรในเวลานั้น)
|
ex
|
แสดงระยะหรือขนาดเป็น ex (1ex = ครึ่งเท่าของตัวอักษรในเวลานั้น)
|
pt
|
แสดงระยะหรือขนาดเป็น point (1pt = 1/72 นิ้ว)
|
pc
|
แสดงระยะหรือขนาดเป็น pica (1pc = 12pt = 1/6 นิ้ว)
|
px
|
แสดงระยะหรือขนาดเป็น pixels (1px = 1 จุดสีบนจอภาพ)
|
เราไม่ควรกำหนดค่าระยะหรือขนาดด้วยตัวเลขเปล่า ๆ แต่ควรใส่หน่วยกำกับทุกครั้ง เพื่อป้องกันการสับสนของบราวเซอร์บางตัว
background:
เป็นคุณสมบัติรวมที่สามารถกำหนดหลายๆ คุณสมบัติพร้อมกันได้ ดังนี้
background:url('picture/bg01.jpg') rbg(255,255,255)
fixed no-repeat 50px right;
background03.htm
<html><head>
<style type="text/css">
body
{background:url('picture/bg01.jpg') rbg(255,255,255) fixed repeat-x 0px 0%}
textarea
{background-image:url('picture/bg02.jpg');
background-color:rbg(200,200,200);
background-attachment:fixed;
background-repeat:repeat-y;
background-position: 0px 0px;
height:150 }
</style>
</head>
<body><textarea></textarea></body>
</html>
การกำหนดคุณสมบัติหลายๆ ตัวพร้อมกันจะใช้ semicolon (;)
คั่น ยกเว้นตัวสุดท้ายจะใส่หรือไม่ก็ได้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น