html实现背景附着

112次阅读
没有评论

html背景附着在网页上,不跟随网页的滑动而滑动,这个效果该怎么实现呢?

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-image: url("fuzhuo.png");
            background-repeat: no-repeat;
            background-position: right top;
            background-attachment: fixed;
        }
    </style>
</head>
<body>

<h1>background-attachment 属性</h1>

<p><b>提示:</b>如果看不到任何滚动条,请尝试调整浏览器窗口的大小。</p>

<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>
<p>大熊猫是固定的。向下滑动还是可以见到大熊猫。</p>

</body>
</html>

代码释义:

background-image:定义了图片的路径,这里可以根据图片实际存放的位置,修改参数值。

background-repeat:是否重复,如果设置的是repeat,那么整个页面都会铺满设置的图片。如图:

html实现背景附着

 

background-position: 设置了图片附着的位置,例如代码中的right top就是右上角方向,如果值为right bottom,就是设置为右下角,还可以是像素值,例如:background-position: 500px 300px;

background-attachment:设置背景是否跟随这滑动一起滑动,当值为fixed代表不滑动,scroll代表滑动。

效果图:

html实现背景附着

正文完
 
评论(没有评论)