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怎么实现禁止缩放

css怎样隐藏文本框边框

css中before的用法是什么

css 区分大小写吗

css如何改变图片的颜色

css怎么设置第一个子元素的高度

css样式有哪几种类型

css中的classlist的意思是什么

css中怎么进行注释

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




打赏

取消

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

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

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

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

评论

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

    暂无评论...

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

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