我们现在经常会用到 CSS, 在编写过程中, 会遇到 CSS 背景图像大小设置的问题. 那么 CSS 如何改变背景图片大小? 下面本篇文章就来给大家介绍一下, 希望对大家有所帮助.
在 CSS 中, 想要改变背景图片的大小, 可以通过设置 background-size 属性来实现.
background-size 属性规定背景图像的尺寸, 可通过长度值或百分比来设置图片大小, 或者通过 cover 和 contain 来对图片进行伸缩设置.
语法:
background-size: length|percentage|cover|contain;
属性值:
值 | 描述 |
---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto (自动) |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 "auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
示例
- <!DOCTYPE html>
- <HTML>
- <head>
- <style>
- body { background:url(/i/bg_flower.gif); 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="/i/bg_flower.gif" alt="Flowers">
- </p>
- </body>
- </HTML>
效果图:
更多 CSS 相关知识, 可访问 CSS 教程 https://www.html.cn/css/ !!
来源: http://www.css88.com/qa/css3/14701.html