Heim > Artikel > Web-Frontend > background-size 设置背景图片的大小_html/css_WEB-ITnose
background-size 设置背景图片的大小_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:041392Durchsuche
background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
提示：大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景图片大小</title><style type="text/css">.demo { background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; width: 300px; height: 140px; border: 1px solid #999; background-size:cover;}</style> </head> <body><div class="demo"></div></body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：multiple backgrounds 多重背景_html/css_WEB-ITnoseNächster Artikel：html 关于ul标签的_html/css_WEB-ITnose