网页背景图设置设置网页背景图，并且不会跟随页面缩放而缩放

看看资讯 / 100+人浏览

注意：免费节点订阅链接已更新至 2026-10-25，点击查看详情

鼠标滚动可以放大缩小，但是背景不会。

hello大家好！今天分享如何在网页中设置背景图，并且把背景图给固定，不随着页面的缩放而改变图片的显示样式，类似于这样子。

在这个页面中提供了一些基础的元素和样式表，在body元素中也设置了背景图片。这个时候按住键盘的Ctrl键，滚动鼠标会发现背景图片和文字也会跟着放大和缩小，背景图片也会变成这种平铺的形式，这肯定不是所需要的。而且这样的背景图给用户的体验肯定不是很好的。

所以这个时候要做的是什么？就是把图片给固定掉，不要让背景图跟随着鼠标的滚动放大缩小。

·这个时候可以采取在背景图中设置一下样式，这里可以设置一下背景图的初始位置为居中background，position为center。这个时候背景图片就会在这个窗口中处于居中的位置，从中间的位置去放置这张图片。

·然后再设置一下背景图片，比如这样子会重复，它是重复的。所以这个时候可以设置一下它的repeat，background-repeat为no-repeat，这个时候就只剩下一张图片了，也就是不重复，这同样的也是不想要的效果。

·这时候再设置一下它，在浏览器窗口中是一个固定的状态，可以设置一下background-attachment，然后把它固定掉，再保存看一下它的效果，但它还是跟随着放大缩小的。

·这个时候再设置图片，让它覆盖填充，拉伸填充整个画面。这时候可以设置一个size为cover，这个时候看到背景图片已经填充了整个窗口的面积，再来放大缩小看一下它，就不会出现那种背景跟随着页面放大，缩小而变化的这种情况。当然这样子来缩放图片，缩放这个窗口也会正常的去适配适应，这才是想要的背景图的设置效果。

今天的分享到这里。

作者: FreeClashNode

链接: https://www.freeclashnode.com/news/article-4316.htm

来源: www.freeclashnode.com

文章版权归作者所有，未经允许请勿转载。

上一个：如何在开发和测试期间对驱动程序进行签名

下一个：Banner设计为什么钟爱这3种构图形式