css如何设置背景图片的大小


本文摘自PHP中文网,作者青灯夜游,侵删。

在css中,可以利用background-size属性设置背景图片的大小,该属性可以指定背景图像的尺寸,语法格式“background-size: 带长度单位的数值|百分比值|cover|contain;”。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中,可以利用background-size属性设置背景图片的大小;可以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。

1

2

3

4

5

background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */

background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */

background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */

background-size:cover;/* 将背景图片等比缩放填满整个容器 */

background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

属性值:

描述
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

阅读剩余部分

相关阅读 >>

css如何定义字体颜色

为什么css不起作用

ie11下不能引入外部css的解决办法

如何使用纯css实现圆形图像?

详解三种css3模糊背景效果(代码实例)

css怎么在图片上加阴影

你可能不了解的css容器查询!!

css浮动的属性是什么

css如何设置超链接的样式

css怎么设置4个div并排显示

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    本站[木庄网络博客]的部分内容来源于网络,若侵犯到您的利益,请联系站长删除!谢谢!Powered By [DTcms] Version 4.0  

    • 欢迎访问木庄网络博客
    • 可复制:代码框内的文字。
    • 方法:Ctrl+C。