1. Home
  2. พื้นหลัง CSS (ประวัติ)

บทช่วยสอน พื้นหลัง CSS (ประวัติ) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ สีพื้นหลัง,ตัวอย่าง,ตัวอย่าง,ภาพพื้นหลัง,ตัวอย่าง,ตัวอย่าง,ภาพพื้นหลัง - ปูกระเบื้องนอนหรือแนวตั้ง,ตัวอย่าง,ตัวอย่าง,ภาพพื้นหลัง - ตั้งค่าตำแหน่งและไม่กระเบื้อง,ตัวอย่าง,ตัวอย่าง,พื้นหลัง - ทรัพย์สินจดชวเลข,ตัวอย่าง,ตัวอย่างเพิ่มเติม,คุณสมบัติพื้นหลัง CSS,

พื้นหลัง CSS (ประวัติ)

คุณสมบัติพื้นหลัง CSS ที่ใช้ในการกำหนดพื้นหลังขององค์ประกอบของ HTML

คุณสมบัติ CSS กำหนดผลกระทบพื้นหลัง:

  • สีพื้นหลัง
  • ภาพพื้นหลัง
  • พื้นหลังซ้ำ
  • พื้นหลังแนบ
  • พื้นหลังตำแหน่ง

สีพื้นหลัง

คุณสมบัติสีพื้นหลังกำหนดสีพื้นหลังขององค์ประกอบ

สีพื้นหลังของหน้าเว็บเพื่อใช้ในการเลือกร่างกาย:

ตัวอย่าง

body {background-color:#b0c4de;}

ลอง»

CSS, ค่าสีก็มักจะถูกกำหนดไว้ในลักษณะดังต่อไปนี้:

  • Hex - เช่น: "# FF0000"
  • RGB - เช่น: "rgb (255,0,0)"
  • ชื่อสี - เช่น: "สีแดง"

ตัวอย่าง, H1, P และองค์ประกอบ div ต่อไปนี้มีสีพื้นหลังที่แตกต่างกัน

ตัวอย่าง

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

ลอง»

ภาพพื้นหลัง

แอตทริบิวต์ background-image อธิบายองค์ประกอบภาพพื้นหลัง

โดยค่าเริ่มต้นภาพพื้นหลังกระเบื้องแสดงซ้ำ ๆ เพื่อให้ครอบคลุมนิติบุคคลองค์ประกอบทั้งหมด

หน้าตัวอย่างการตั้งค่าภาพพื้นหลัง:

ตัวอย่าง

body {background-image:url('paper.gif');}

ลอง»

นี่คือตัวอย่างของการรวมกันที่ไม่ดีของข้อความและพื้นหลังภาพ ข้อความอ่านง่ายเป็นคนยากจน

ตัวอย่าง

body {background-image:url('bgdesert.jpg');}

ลอง»

ภาพพื้นหลัง - ปูกระเบื้องนอนหรือแนวตั้ง

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

ถ้าภาพบางส่วนกระเบื้องแนวตั้งและแนวจึงมีลักษณะการประสานงานมากดังนี้

ตัวอย่าง

body
{
background-image:url('gradient2.png');
}

ลอง»

ถ้ากระเบื้องภาพ (ซ้ำ-X) เท่านั้นในทิศทางแนวนอนพื้นหลังหน้าจะดีกว่า:

ตัวอย่าง

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

ลอง»

ภาพพื้นหลัง - ตั้งค่าตำแหน่งและไม่กระเบื้อง

คำพูด ให้ภาพพื้นหลังไม่ได้ส่งผลกระทบต่อรูปแบบข้อความ

หากคุณไม่ต้องการกระเบื้องภาพที่คุณสามารถใช้คุณสมบัติพื้นหลังซ้ำไปนี้:

ตัวอย่าง

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

ลอง»

ตัวอย่างข้างต้น, ภาพพื้นหลังและตัวอักษรที่ปรากฏอยู่ในสถานที่เดียวกันเพื่อที่จะทำให้รูปแบบหน้าที่เหมาะสมมากขึ้นไม่ได้ส่งผลกระทบต่อการอ่านข้อความที่เราสามารถเปลี่ยนตำแหน่งของภาพ

คุณสมบัติ background-ตำแหน่งสามารถใช้ในการเปลี่ยนภาพในพื้นหลังที่นี่:

ตัวอย่าง

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

ลอง»

พื้นหลัง - ทรัพย์สินจดชวเลข

ในตัวอย่างข้างต้นเราจะเห็นสีพื้นหลังของหน้าผ่านมากของคุณลักษณะในการควบคุม

เพื่อลดความซับซ้อนรหัสสำหรับคุณสมบัติเหล่านี้เราสามารถใช้แอตทริบิวต์เหล่านี้จะรวมกันในสถานที่ให้บริการเดียวกัน

สีพื้นหลังของสถานที่ให้บริการจดชวเลขสำหรับ "พื้นหลัง":

ตัวอย่าง

body {background:#ffffff url('img_tree.png') no-repeat right top;}

ลอง»

เมื่อมีการใช้สถานที่ให้บริการจดชวเลขคำสั่งของค่าแอตทริบิวต์เป็น ::

  • สีพื้นหลัง
  • ภาพพื้นหลัง
  • พื้นหลังซ้ำ
  • พื้นหลังแนบ
  • พื้นหลังตำแหน่ง

คุณลักษณะทั้งหมดเหล่านี้ไม่จำเป็นต้องใช้คุณสามารถใช้ตามความต้องการที่แท้จริงของหน้า

ตัวอย่างนี้ใช้ CSS อธิบายไว้ก่อนหน้านี้คุณสามารถดูตัวอย่าง: ตัวอย่าง CSS

ตัวอย่าง

ตัวอย่างเพิ่มเติม

วิธีการตั้งค่าภาพพื้นหลังได้รับการแก้ไข
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าภาพพื้นหลังได้รับการแก้ไข ภาพจะไม่เลื่อนกับส่วนที่เหลือของหน้า

คุณสมบัติพื้นหลัง CSS

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

บทแนะนำยอดนิยม

Contact US

พื้นหลัง CSS (ประวัติ)
10/30