网页背景图不够大而重复显示的解决方案

a595364628

于 2016-07-19 10:49:56 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html/css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/a595364628/article/details/51953701

html/css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种解决网页背景图尺寸不足导致的叠图问题的方法。通过调整CSS属性，如将背景图的位置设为底部居中，并使用cover属性使图片铺满整个屏幕，从而实现背景图的良好显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当背景图不够大，网页会出现叠图效果：

如何解决这个问题？很简单，让图片居中显示并且让它直接cover在屏幕上：

body{
		background-image: url("__PUBLIC__/images/bg.jpg");
                background-position: bottom center;
                background-size: cover;
    }

如此就背景图片显示正常了