<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单一样式</title>
<style>
*{margin:0px;padding: 0px;}
.box-top{width: 50%;height: 400px;background-color: #ccc;margin: 1% auto;background-image: url(1.jpg) ;background-repeat: no-repeat;background-position: 100px 100px; background-size: contain}
/*
下面的都叫做单一样式
background-image: url(1.jpg) 默认状态下会平铺当前容器下的四周空间
background-repeat:有三个取值
no-repeat 不平铺
repeat-x 平铺x轴方向
repeat-y 平铺y轴方向
background-position:
前后取值对应 x轴 y轴
可以是px的值 如 100px 100px
也可以是,x轴 left|center|right y轴 top|center|bottom
它在底层方面实现了可以把x轴和y轴自动识别,如top left 和 left top是一个效果。
background-size:
取值可以是
length直接是像素 对应宽度和高度的长度如 100px 100px;如果只提供一个值,第二个值会被设置为auto
percentage百分比 对应宽度和高度的长度如 20% 20% ;如果只提供一个值,第二个值会被设置为auto
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
*/
</style>
</head>
<body>
<div class="box-top">
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>复合样式</title>
<meta charset="utf-8">
<style>
*{margin:0px;padding: 0px}
.box-top{width: 60%;height: 3000px;background: url(1.jpg) no-repeat fixed #ccc center top;background-size: contain}
/*
在这里background-size不能写在backgound复合样式里面。因为position和size都可以是length(直接写宽高多少像素)
写backgound-size要另外写
*/
</style>
</head>
<body>
<div class="box-top"></div>
</body>
</html>