CSS การตรึงภาพพื้นหลัง

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

CSS การตรึงภาพพื้นหลัง

Post by GoB » 11/03/2015 1:25 pm

CSS การตรึงภาพพื้นหลัง

ปกติแล้วเวลาที่เราเลื่อนสกอลบาร์แล้วพื้นหลังมักจะเลื่อนตามไปด้วย แต่เราสามารถล็อคหรือตรึงพื้นหลังให้ไม่ให้เลื่อนตามสกอลบาร์ได้ โดยที่จะใช้ background-attachment ซึ่งค่าที่ใช้กำหนดนั้นจะมีอยู่ 2 แบบ คือ fixed และ scrooll ซื่งทั้งสองแบบนี้จะมีการทำงานที่ต่างกัน คือ แบบ fixed จะตรึงภาพไว้กับที่หากเราเลื่อนสกอลบาร์ภาพก็จะไม่เลื่อนตามไปด้วย อีกแบบคือ แบบ scoll การทำงานคือภาพจะถูกเลื่อนไปตามสกอบาร์ คำสั่งที่ใช้ในการตรึงภาพพื้นหลังคือ background-attachment: fixed;

ตัวอย่างโค้ดที่ใช้เขียน

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
	body  { background-image : url('orange.jpg') ;	//ที่อยู่ของรูปภาพ
	background-repeat : no-repeat;			//กำหนดให้แสดงเพียงภาพเดียว
	background-position :  top left; 			//จัดตำแหน่งของรูปภาพ
	background-attachment: fixed;			//กำหนดตรึงภาพ เพื่อไม่ให้ภาพเลื่อนตามสกอลบาร์
}
</style>		
<body>
<h2>ข้อความที่ 1</h2>
<h2>ข้อความที่ 2</h2>
<h2>ข้อความที่ 3</h2>
<h2>ข้อความที่ 4</h2>
<h2>ข้อความที่ 5</h2>
<h2>ข้อความที่ 6</h2>
<h2>ข้อความที่ 7</h2>
<h2>ข้อความที่ 8</h2>
<h2>ข้อความที่ 9</h2>
<h2>ข้อความที่ 10</h2>
<h2>ข้อความที่ 11</h2>
<h2>ข้อความที่ 12</h2>
<h2>ข้อความที่ 13</h2>
<h2>ข้อความที่ 14</h2>
<h2>ข้อความที่ 15</h2>
<h2>ข้อความที่ 16</h2>
<h2>ข้อความที่ 17</h2>
<h2>ข้อความที่ 18</h2>
<h2>ข้อความที่ 19</h2>
<h2>ข้อความที่ 20</h2>
</body>
</html>
ผลลัพธ์ที่ได้
ก่อนเลื่อนสกอบาร์
ก่อน.jpg
ก่อน.jpg (51.82 KiB) Viewed 3004 times
หลังจากมีการเลื่อนสกอบาร์
หลัง.jpg
หลัง.jpg (48.5 KiB) Viewed 3004 times
บทความที่เกี่ยวข้อง
บทที่ 3 CSS3 Backgrounds สร้างพื้นหลังบนหน้าเว็บ

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 13 guests