คุณสมบัติ CSS background shorthand property ใช้สำหรับกำหนดพื้นหลังสำหรับองค์ประกอบ background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin และ background-attachment รวมกันเป็นคุณสมบัติ CSS background properties
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS background property มีดังนี้:
Selector { background: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS background property:
<!DOCTYPE html> <html> <head> <style> body { background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat 40% 20%; } div { padding: 100px; background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left; } </style> </head> <body> <h2>Learn</h2> <ul> <li>Java</li> <li>C#</li> <li>Android</li> <li>iOS</li> <li>C++</li> <li>C</li> </ul> <div></div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> table, tr,td{ margin: auto; border: 2px solid red; padding: 40px; } td { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/blockchain.png") no-repeat; } #demo { background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/reactjs.png") no-repeat; } table { background: ivory url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat center; } </style> </head> <body> <h2>Learning is fun</h2> <table> <tr><td></td></tr> <tr><td id="demo"></td></tr> </table> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
