Style background 속성

정의와 사용법

background 속성은 단축 형식으로 설정하거나 반환하여 최대 8개의 별도의 배경 속성을 설정할 수 있습니다.

이 속성을 통해 다음 중 하나나 여러 가지를 설정하거나 반환할 수 있습니다.:

DOM 속성 CSS 속성
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

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

ดูเพิ่มเติม:

ตัวเรียน CSS:CSS ภาพพื้น

ตัวเรียน CSS3:background ของ CSS3

คู่มือ CSS:คุณสมบัติ background

ตัวอย่าง

ตั้งค่ารูปแบบพื้นหลังของเอกสาร:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

ทดสอบเอง

มีตัวอย่าง TIY มากมายด้านล่างของหน้าเว็บ

รูปแบบการใช้งาน

คืนค่ารูปแบบ background:

object.style.background

ตั้งค่ารูปแบบ background:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

ค่ารูปแบบทางตัวเลข

ค่า คำอธิบาย
color ตั้งค่าสีพื้นหลังขององค์ประกอบ
image ตั้งค่าภาพตาพื้นหลังขององค์ประกอบ
repeat ตั้งค่าวิธีการซ้ำภาพตาแบบพื้นหลัง
attachment ตั้งค่าภาพตาแบบพื้นหลังเป็นแน่นหรือลอยตามการเคลื่อนไหวของหน้าเว็บ
position ตั้งค่าตำแหน่งตั้งต้นของภาพตาแบบพื้นหลัง
size ตั้งค่าขนาดภาพตาแบบพื้นหลัง
origin ตั้งค่าพื้นที่การตั้งตำแหน่งภาพตาแบบพื้นหลัง
clip ตั้งค่าพื้นที่การวาดภาพตาแบบพื้นหลัง
initial ตั้งค่ารูปแบบนี้เป็นค่าเริ่มต้นของเขา โปรดดู initial.
inherit ที่ยืนยันรูปแบบนี้จากองค์ประกอบพ่อของเขา โปรดดู inherit.

รายละเอียดเทคนิค

ค่าเริ่มต้น: transparent none repeat scroll 0% 0% auto padding-box border-box
ค่าที่คืนค่ามา: ตัวอักษรภาษาไทย ที่แสดงรูปแบบพื้นหลังขององค์ประกอบ。
เวอร์ชั่น CSS: CSS1 + คุณสมบัติใหม่ใน CSS3

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

ตัวอย่าง 2

เปลี่ยนรูปแบบพื้นหลัง DIV:

document.getElementById("myDIV").style.background = "url('smiley.gif') ฝากดาวเทียมสไตล์ blue repeat-x center";

ทดสอบเอง

ตัวอย่าง 3

ตั้งสีเบื้องหลังของเอกสาร:

document.body.style.backgroundColor = "red";

ทดสอบเอง

ตัวอย่าง 4

ตั้งภาพ배경ของเอกสาร:

document.body.style.backgroundImage = "url('img_tree.png')";

ทดสอบเอง

ตัวอย่าง 5

ตั้งภาพ배경เป็นไม่เริ่มต้น:

document.body.style.backgroundRepeat = "repeat-y";

ทดสอบเอง

ตัวอย่าง 6

ตั้งภาพ배경เป็น fixed (จะไม่เลื่อน):

document.body.style.backgroundAttachment = "fixed";

ทดสอบเอง

ตัวอย่าง 7

เปลี่ยนตำแหน่งภาพ 배경:

document.body.style.backgroundPosition = "top right";

ทดสอบเอง

ตัวอย่าง 8

คืนค่าของคุณสมบัติ background ของเอกสาร:

document.body.style.background;

ทดสอบเอง

การสนับสนุนโดยเบราเซอร์

background เป็นคุณสมบัติของ CSS1 (1996)

ทุกเบราเซอร์สนับสนุนอย่างเต็มที่:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน

หมายเหตุ

CSS3 (1999) ได้เพิ่มสามคุณสมบัติใหม่: