背景图片
取值
<!--
background-image:url(路径);引入背景图片
background-repeat: 背景重复
取值:
no-repeat 不重复
repeat-x 在x轴方向重复
repeat-y 在y轴方向重复
repeat 默认值 重复
background-size: 背景图片的大小
取值:
value1(宽度) value2(高)
value1%(宽度) value2%(高)
cover 覆盖 将背景图片等比例缩放直到背景图片能覆盖元素的所有区域
contain 包含 将背景图片等比例缩放,直到背景图片碰到右边或下边的时候停止缩放
background-attachment: 背景图片固定
取值:
scroll 默认值,会随着文档的滚动而滚动
fixed 背景图片固定,不会随着文档的滚动而滚动
-->
样式
<html>
<head>
<meta charset="utf-8"/>
<title>背景图片</title>
<style>
.dv1{
width:1200px;
height:600px;
border:1px solid #000;
margin:20px auto;
/**添加背景图片**/
background-image:url(images/team1.jpg);
/**不让背景图片重复*/
background-repeat:no-repeat;/*不重复*/
/*在x轴重复*/
/* background-repeat:repeat-x; *//*在x轴重复*/
/*在y轴重复*/
/* background-repeat:repeat-y; *//*在x轴重复*/
/**改变背景图片的尺寸*/
/* background-size:
value1(宽) value2(高);
value1% value2%
cover 覆盖 将背景图片等比例缩放直到背景图片能覆盖元素的所有区域
*/
/*background-size:1200px 600px;*/
background-size:contain;
background-attachment:fixed;
/*背景图的固定
background-attachment:
取值:
scroll 默认值,会随着文档的滚动而滚动
fixed 背景图片固定,不会随着文档的滚动而滚动
*/
}
</style>
</head>
<body>
<!--
background-image:url(路径);引入背景图片
background-repeat: 背景重复
取值:
no-repeat 不重复
repeat-x 在x轴方向重复
repeat-y 在y轴方向重复
repeat 默认值 重复
background-size: 背景图片的大小
取值:
value1(宽度) value2(高)
value1%(宽度) value2%(高)
cover 覆盖 将背景图片等比例缩放直到背景图片能覆盖元素的所有区域
contain 包含 将背景图片等比例缩放,直到背景图片碰到右边或下边的时候停止缩放
background-attachment: 背景图片固定
取值:
scroll 默认值,会随着文档的滚动而滚动
fixed 背景图片固定,不会随着文档的滚动而滚动
-->
<div class='dv1'>
<p>dffdgggffghgn</p>
</div>
<div class='dv2'></div>
</body>
</html>