background-size设置背景图片的大小
2016-09-07 10:19
302 查看
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
语法:
取值说明:
1、auto:默认值,不改变背景图片的原始高度和宽度;
2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;
4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
在右侧代码编辑器窗口的第12行,输入正确内容使背景图片填满整个容器。
<!DOCTYPE www.dztcsd.comhtml>
<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>
语法:
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明:
1、auto:默认值,不改变背景图片的原始高度和宽度;
2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;
4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
任务
在右侧代码编辑器窗口的第12行,输入正确内容使背景图片填满整个容器。<!DOCTYPE www.dztcsd.comhtml>
<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>
相关文章推荐
- Flex中如何通过backgroundImage和backgroundSize样式,设置VBox容器的背景图片以及大小
- background-size 设置背景图片的大小
- background-size 设置背景图片的大小
- css设置背景图片的大小:background-size:100px 200px;
- css 背景图片尺寸设置 background-size
- 手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置
- 手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置
- HTML5基础加强css样式篇(背景图大小设置:background-size)(三十九)
- 手机网页图片自适应大小 background-size css 图片全屏 背景尺寸设置
- 用background-size实现 背景图片自适应浏览器大小,但不变形
- background-size设置背景图片自适应 在ie8下失效的问题
- 转载 Java中如何设置按钮背景图片大小
- css background之设置图片为背景技巧
- 获取android 手机屏幕的大小以及动态设置背景图片的两种方法;
- 解决 UIView 设置背景为UIImage图片变型问题[XXX setBackgroundColor:[UIColor colorWithPatternImage:XXX]];
- background-size定义背景图片的高和宽
- PHP 验证码可设置字体(大小),可换背景图片,可扭曲角度
- CSS3 background 分别设置多个背景图片
- jquery设置背景图片:$(this).css("background-image","url(on.jpg)");就可以了
- 解决 UIView 设置背景为UIImage图片变型问题[XXX setBackgroundColor: