css怎么设置背景图片的大小?
background-size 属性规定背景图像的尺寸。
语法:
background-size: length|percentage|cover|contain;
属性值:
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
css设置背景图片大小示例:
<!DOCTYPE html> <html> <head> <style> body { background:url(/i/bg_flower.webp); 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.webp" alt="Flowers"></p> </body> </html>
效果图:
以上就是css怎么设置背景图片的大小?的详细内容,更多请关注易知道|edz.cc其它相关文章!
相关内容
-
wps中调整文字左对齐|在wps中使文字左对齐
wps中调整文字左对齐|在wps中使文字左对齐,对齐,调整,文字,wp...
-
扬声器属性级别设置|扬声器属性高级
扬声器属性级别设置|扬声器属性高级,,1. 扬声器属性高级选择“...
-
电脑显卡刷新率怎么调整|显卡刷新率设置
电脑显卡刷新率怎么调整|显卡刷新率设置,,1. 显卡刷新率设置操...
-
cad查看属性的快捷键|cad查看特性快捷键
cad查看属性的快捷键|cad查看特性快捷键,,1. cad查看特性快捷...
-
如何调整的win7win7任务栏预览窗口的大小调整大
如何调整的win7win7任务栏预览窗口的大小调整大小的方法,,任务...
-
铃声设置图片|来电铃声背景图片怎么设置
铃声设置图片|来电铃声背景图片怎么设置,,1. 来电铃声背景图片...
-
如何自动调整电脑时间|怎么设置电脑自动调整时
如何自动调整电脑时间|怎么设置电脑自动调整时间,,怎么设置电...
-
14寸笔记本电脑主题|14寸笔记本电脑背景图片
14寸笔记本电脑主题|14寸笔记本电脑背景图片,,14寸笔记本电脑...
-
如何在电脑中批量修改相片像素|如何在电脑中批
如何在电脑中批量修改相片像素|如何在电脑中批量修改相片像...
-
Excel图表怎样移动和调整图表大小?
Excel图表怎样移动和调整图表大小?,图表,生成,怎么,一、移动图...
-
1分钟学会在C++中将图像转换为Word文档,快速入手
1分钟学会在C++中将图像转换为Word文档,快速入手光学字符处理...
-
电脑配件怎么可能是真是假计算机辅助识别真假图
电脑配件怎么可能是真是假计算机辅助识别真假图像,,电脑配件怎...
-
win10系统下怎么调整文件夹顺序按照访问时间排
win10系统下怎么调整文件夹顺序按照访问时间排序,文件夹,顺序...
-
win7的屏幕亮度的快速调整方法(可以减少眼睛的疲
win7的屏幕亮度的快速调整方法(可以减少眼睛的疲劳),,长时间盯着...
-
pdf怎么设置纸张大小|pdf格式怎么调整纸张大小
pdf怎么设置纸张大小|pdf格式怎么调整纸张大小,,1. pdf格式怎...