欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS hack >

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(<a href="http://static.mukewang.com/static/img/logo_index.png">http://static.mukewang.com/static/img/logo_index.png</a>) no-repeat;
width: 300px;
height: 140px;
border: 1px solid #999;
background-size:cover;
}
</style> 
</head>
<body>
<div class="demo"></div>
</body>
</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-hack/c50277.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-02 11:17 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。