html固定的背景图,固定背景图片.html

固定背景图片

html,body{

margin: 0;

padding: 0;

}

div{

width: 50%;

height: 300px;

background-color: aqua;

font-size: 30px;

font-weight: bold;

margin: 60px auto;

color: red;

overflow: auto;

background-image: url(img/5.jpg);

background-repeat: no-repeat;

background-position: 100% 100%;

}

.bgScroll{

/* 固定背景图片的位置 */

/* background-attachment: fixed; */

/* 默认参数 */

background-attachment: scroll;

}

.bglocal{

background-attachment: local;

}

/*

scroll:默认值，背景图片相对于元素固定，背景随页面而移动，即背景和内容绑定

fixed:背景图片相对于视口固定，所以随页面滚动而不动

local：背景图相对于元素内容的固定

inherit:继承

*/

我是第一个测试区域

我是第1个p标签

我是第2个p标签

我是第3个p标签

我是第4个p标签

我是第5个p标签

我是第6个p标签

我是第7个p标签

我是第8个p标签

我是第9个p标签

我是第10个p标签

我是第11个p标签

我是第12个p标签

我是第13个p标签

我是第14个p标签

我是第15个p标签

我是第16个p标签

我是第17个p标签

我是第18个p标签

我是第19个p标签

我是第20个p标签

我是第1

我是第2

我是第3

我是第4

我是第5

我是第6

我是第7

我是第8

我是第9

我是第10

我是第11

我是第12

我是第13

我是第14

我是第15

一键复制

编辑

Web IDE

原始数据

按行查看

历史