本文介绍了如何使用CSS3的`background-size: cover`属性配合`padding-top`实现响应式背景图，避免了媒体查询的繁琐。通过设置百分比的`padding-top`值，保持元素宽高比，再结合`background-size: cover`让背景图铺满容器，从而实现兼容IE9+的响应式背景效果。
一.利用css3 中的background-size: cover属性
1.background-size: length|percentage|cover|contain;
浏览器支持情况： IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size
属性。
| 值 | 说明 |
|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度如果只设置一个值，则第二个值会被设置为 “auto”。 |
| – | – |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto” |
| – | – |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| – | – |
| cover | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-size:cover 背景图片</title>
<style>
最低0.47元/天 解锁文章
扫一扫
1757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
