CSS background-size属性
作用:划定背景图片的尺寸。
申明:在 CSS3 之前,背景图片的尺寸是由图片的现实尺寸决议的。在 CSS3 中,能够划定背景图片的尺寸,这就许可我们在差别的环境中重复运用背景图片。
语法:
background-size: length|percentage|cover|contain;
值 | 形貌 |
length | 设置背景图象的高度和宽度。 第一个值设置宽度,第二个值设置高度。 假如只设置一个值,则第二个值会被设置为 "auto"。 |
percentage | 以父元素的百分比来设置背景图象的宽度和高度。 第一个值设置宽度,第二个值设置高度。 假如只设置一个值,则第二个值会被设置为 "auto"。 |
cover | 把背景图象扩大至足够大,以使背景图象完整掩盖背景地区。 背景图象的某些部份或许没法显现在背景定位地区中。 |
contain | 把图象图象扩大至最大尺寸,以使其宽度和高度完整顺应内容地区。 |
CSS background-size属性运用示例
<!DOCTYPE html> <html> <head> <style> body { background:url(https://img.ki4.cn/upload/article/000/000/024/5c513adf97e86533.jpg); background-size:63px 100px; -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-repeat:no-repeat; padding-top:80px; } </style> </head> <body> <p>上面是减少的背景图片。</p> <p>原始图片:<img src="https://img.ki4.cn/upload/article/000/000/024/5c513adf97e86533.jpg" alt="Flowers"></p> </body> </html>
效果图:
以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。更多精彩内容人人能够关注ki4网相干教程栏目!!!
以上就是background-size属性怎样用的细致内容,更多请关注ki4网别的相干文章!