CSS3中包含几个新的背景属性,提供更大背景元素控制。
在本章您将了解以下背景属性:
- background-image
- background-size
- background-origin
- background-clip
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3背景</title> <style type="text/css"> * { margin: 0; padding: 0; } .rcorners { width: 500px; height: 300px; margin: 20px auto; border:1px solid red; background-image: url(250x250px.gif), url(smiley.gif); background-position: right bottom, 20px center; background-repeat: no-repeat, no-repeat; } </style> </head> <body> <div class="rcorners"></div> </body> </html>
效果如下: