css背景图片不动怎么设置?

在制作前端页面的时候,有时候我们需要设置一个背景图片,那如何设置当滚动条滚动的背时候背景图片不随滚动条而滚动呢?下面我们来看一下css设置背景图片不动的方法。

css中使用background-attachment属性来固定背景图片不随滚动条滚动而滚动。background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment属性值:

  • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

  • fixed 当页面的其余部分滚动时,背景图像不会移动。

  • inherit 规定应该从父元素继承 background-attachment 属性的设置。

示例:

<html>
<head>
<style type="text/css">
body 
{
background-image:url(img/4.webp);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>

<body>
<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>

效果图:

以上就是css背景图片不动怎么设置?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读