固定背景图片

时间:2021-07-21 10:31:05

background-attachment 该属性来定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit

scroll: 随着页面的滚动轴背景图片将移动

fixed: 随着页面的滚动轴背景图片不会移动

inherit: 继承

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="all">
body
{
background-image:url('img.jpg');
background-size: 100% 100%;
background-attachment:fixed;/*定义背景图片随滚动轴的移动方式*/
background-repeat:no-repeat;
background-position:top center;

}

.box{
width: 1000px;
margin:0 auto;
border:2px solid red;
height: 5000px;
line-height: 80px;
font-size: 30px;
color:blue ;
}

</style>
</head>
<body>
<div class="box"></div>
</body>
</html>