不会随着文字一起滚动的背景图
2018-06-11 本文已影响16人
Lia代码猪崽
在巩固CSS基础的时候，看到了background-attachment:fixed属性，所以我是直接在W3C中运行测试的。
w3school中的介绍
<html>
<head>
<style type="text/css">
.img
{
background-image:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529291443&di=7c66ab70ad82e623c6544a7edb315ed2&imgtype=jpg&er=1&src=http%3A%2F%2Fpic145.nipic.com%2Ffile%2F20171102%2F21764388_113558836250_2.jpg");
background-repeat:no-repeat;
background-attachment:fixed
}
.a {
background: pink;
}
</style>
</head>
<body>
<div class="img">
<p>1小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>2小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>3小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>4小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>5小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>6小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>7小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>8小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>9小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>10小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>11小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>12小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>13小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>14小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>15小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>16小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>17小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>18小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>19小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>20小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>21小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>22小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
<p>23小猪佩奇里面：图像不会随页面的其余部分滚动。</p>
</div>
<p>1小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>2小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>3小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>4小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>5小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>6小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>7小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>8小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>9小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>10小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>11小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>12小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>13小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>14小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
<p>15小猪佩奇外面：图像不会随页面的其余部分滚动。</p>
</body>
</html>
一开始
当滚动了内容时，图片还在那个位置
已经快完全滚动到外面了，图只剩下一部分显示，但还是那个位置
