背景样式
程序员文章站
2022-03-26 18:25:28
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 500px;
height: 500px;
border: 1px solid red;
overflow: scroll;
/* 1.添加背景颜色 */
/* background-color: #fff; */
/* 添加背景图片 */
/* 如果图片大于容器，默认从左上角开始放置 */
background-image: url("img/3.png");
/*3.设置背景平铺
round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
/*background-repeat: space;*/
/*4.设置在滚动容器的背景的行为：跟随滚动/固定
fixed:背景图片的位置固定不变
scroll:当滚动容器的时候，背景图片也会跟随滚动*/
/*local和scroll的区别：前提是滚动当前容器的内容
local:背景图片会跟随内容一起滚动
scroll:背景图片不会跟随内容一起滚动*/
background-attachment: scroll;
}
</style>
</body>
<div>
<p style="height: 800px;"></p>
</div>
<span style="height: 800px;display:block ;"></span>
</html>