background-size
background-size指定背景图像的大小
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> < html > < head > < style > body { background:url(/try/demo_source/img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; padding-top:40px; } </ style > </ head > < body > < p > Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 </ p > < p >原始图片: < img src = "/try/demo_source/img_flwr.gif" alt = "Flowers" width = "224" height = "162" ></ p > </ body > </ html > |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> < html > < head > < style > div { background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; } </ style > </ head > < body > < div > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </ div > </ body > </ html > |
background-Origin
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> < html > < head > < style > div { border:1px solid black; padding:35px; background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:content-box; } </ style > </ head > < body > < p >background-origin:border-box:</ p > < div id = "div1" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </ div > < p >background-origin:content-box:</ p > < div id = "div2" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </ div > </ body > </ html > |
CSS3 多个背景图像
CSS3 允许你在元素
那个添加多个背景图像| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> < html > < head > < style > body { background-image:url(img_flwr.gif),url(img_tree.gif); } </ style > </ head > < body > </ body > </ html > |
新的背景属性
| 顺序 | 描述 | CSS |
|---|---|---|
| 规定背景的绘制区域。 | 3 | |
| 规定背景图片的定位区域。 | 3 | |
| 规定背景图片的尺寸。 | 3 |