您的位置:首页> 前端教程> CSS3教程
文章导航

CSS background-size

2019-11-22 16:11| 作者: admin| 查看: 561| 评论: 0|来自: 蚂蚁部落

background-size属性用于规定背景图片的尺寸,其名称也反映了这一点。

在此前,很难精确的控制背景图片的尺寸,只能进行重复或者固定等简单操作。

下面通过代码实例详细介绍一下background-size属性的用法。

语法结构:

[CSS] 纯文本查看 复制代码
background-size: auto|length|percentage|cover|contain

下面通过代码实例详细演示一下各个属性值是如何控制背景图片尺寸。

一.length|percentage|auto:

background-size属性值可以使具体的数据,比如length或者percentage形式。

也可以是关键字形式,例如auto、cover和contain。

由于length、percentage和auto可以组合使用,所以将它们放在一起介绍。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:200px 100px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/161236mc2v9yvf9uetif38.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下简单分析:

(1).background-size如果有两个属性值,那么第一个规定宽度,第二个规定高度。

(2).所以上述代码规定背景图片的宽度是200px,高度是100px。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:200px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/161915dh19aah1s91z9tyb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下简单分析:

(1).background-size如果只有一个属性值,那么第一个规定宽度,第二个默认值为auto,规定高度。

(2).此时,背景图片的高度值会根据宽度值进行等比例缩放。

(3).背景图片的原始尺寸是200x100,由于宽度是200px,所以高度也自动缩放为100px。

(4).缩放的参考的是图片的原始尺寸,而不是容器的尺寸。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:50% 100px; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/161950nbnbskkgekkspgnb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下简单分析:

(1).规定背景图片的宽度是50%,原图的宽度是200,px,所以背景图呈现100px宽度。

(2).规定背景图片的高度是100px。

二.cover:

cover翻译成汉语具有"覆盖"或者"铺满"的意思。

此属性值规定背景图片必须要铺满容器,如果不能覆盖则需要进行放大处理,超出的部分裁切。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:cover; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/162046cj2twwtv222tg4by.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下简单分析:

(1).容器的尺寸是250x150,背景图片原始大小是200x100。

(2).如果要完全铺满容器,背景图片需要放进行按照比例放大处理。

(3).横向超出的尺寸将被裁切。

三.contain:

contain返回成汉语具有"容纳"或者"包含"的意思。

此属性值规定容器元素要完全包含背景图片,且至少某一方位完全铺满容器。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:250px; 
  height:150px; 
  border:15px dashed black; 
} 
.bdsize{ 
  background-image:url(demo/CSS/img/bdsize.png); 
  background-size:contain; 
  background-repeat:no-repeat; 
} 
</style> 
</head> 
<body> 
  <div class="bdsize"></div>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/22/162120k8a78jl6jxzjja0b.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下简单分析:

(1).首先容器元素必须完全容纳背景图片,不存在裁切的情况。

(2).至少在高度或者宽度上铺满容器,如果背景图片和容器宽高比例相同,那么会完全铺满。

(3).容器的尺寸是250x150,背景图片原始大小是200x100。

(4).宽度比250/200=1.25,高度比150/100=1.5。

(5).所以需要放大背景图片的宽度,在横向上铺满容器。

(6).如果放大高度,那么宽度就会超出容器,违背不存在裁切的原则。

四.作用于多个背景图片:

此属性可以规定多组属性值作用于多个背景图片。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.bg{
  width:215px;
  height:165px;
  background-attachment:scroll,scroll,scroll,scroll;
  background-clip:border-box;
  background-color:transparent;
  background-image:url(mytest/demo/top-left.jpg),
  url(mytest/demo/top-right.jpg),
  url(mytest/demo/bottom-left.jpg),
  url(mytest/demo/bottom-right.jpg);
  background-origin: border, border, border, border;
  background-origin:border-box, border-box, border-box, border-box;
  background-position:left top, right top, left bottom, right bottom;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:55px 45px, auto auto, auto auto, auto auto;
}
</style>
</head>
<body>
  <div class="bg"></div>
</body>
</html>

组与组之间采用逗号进行分割,作用顺序与背景图片的定义顺序相同。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS box-sizing

最新评论

返回顶部