css设置背景图自适应高度

原创于 2019-09-26 15:12:29 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了两种使用CSS实现背景图片全屏显示的方法。第一种是直接在body元素上应用样式，包括固定位置、禁止重复、调整大小等属性。第二种是通过img标签，并设置其宽度、高度和显示方式。这些技巧对于前端开发者来说非常实用。

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

方式一：

  	body {
	  	width: 100%;
	    height: 100%;
	    position: fixed;
	    z-index: -1;
	    background-repeat: no-repeat;
	    background-position: 0px 0px;
	    background-size: 100% 100%;
    }

方式二：使用img标签

img {
	position: fixed;
	width: 100%;
	height: 100%;
	display: block;
	z-index: -100;	
}