css3-background样式
作者:
AssertDo | 来源:发表于
2019-08-26 16:49 被阅读0次 <!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>
本文标题:css3-background样式
本文链接:https://www.haomeiwen.com/subject/fyjdectx.html
网友评论