Thuộc tính viết tắt nền CSS được sử dụng để xác định nền cho một phần tử. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin và background-attachment bao gồm các thuộc tính nền CSS.
Cú pháp
Cú pháp của thuộc tính nền CSS như sau -
Selector { background: /*value*/ }
Ví dụ
Các ví dụ sau minh họa thuộc tính nền CSS -
<!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>
Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!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>
Đầu ra
Điều này cho kết quả sau -