home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

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

คุณสมบัติพื้นหลังใน CSS ช่วยให้เราจัดรูปแบบพื้นหลังขององค์ประกอบ คุณสมบัติ background ใน CSS เป็นคุณสมบัติแบบย่อสำหรับระบุพื้นหลังขององค์ประกอบ background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin และ background-attachment รวมกันเป็นคุณสมบัติพื้นหลัง CSS

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS background ดังนี้:

Selector {    background: /*value*/ }

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS background:

<!DOCTYPE html> <html> <head> <style> #main {    margin: auto;    width: 300px;    background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");    background-repeat: no-repeat;    background-size: cover; } #im {    height: 200px;    width: 200px;    background-image: url("https://www.tutorialspoint.com/images/css.png");    background-repeat: no-repeat;    background-position: center; } </style> </head> <body> <div id="main"> <div id="im"></div> </div> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

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

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

<!DOCTYPE html> <html> <head> <style> body {    background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini-logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");    background-repeat: no-repeat;    background-attachment: fixed;    background-position: 10% 10%, 40% 40%, 90% 10%; } </style> </head> <body> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

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