css3-background样式
2019-08-26 本文已影响0人
AssertDo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
overflow: scroll;
/*1.添加背景颜色*/
/*background-color: skyblue;*/
/*2.添加背影图片
如果图片大于容器，那么默认就从容器左上角开始放置
如果图片小于容器，那么图片默认会平铺*/
/*background-image: url("../images/bg-img.jpg");*/
background-image: url("../images/share1.png");
/*3.设置背景平铺
round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
/*background-repeat: space;*/
/*4.设置在滚动容器的背景的行为：跟随滚动/固定
fixed:背景图片的位置固定不变
scroll:当滚动容器的时候，背景图片也会跟随滚动*/
/*local和scroll的区别：前提是滚动当前容器的内容
local:背景图片会跟随内容一起滚动
scroll:背景图片不会跟随内容一起滚动*/
background-attachment: scroll;
}
</style>
</ead>
<body>
<div>
<p style="height: 800px;"></p>
</div>
<span style="height: 800px;display: block"></span>
</body>
</html>
