css 背景图填充屏幕 |div css中div

css 布局博客，css伪类 empty，css表格滚动播放，css3 延迟加载，html属性与css属性是，css共同样式的命名，div css中div css 背景图填充屏幕 |div css中div

html,
body {
height: 100%;/*设置body高度为100%*/
margin: 0;
padding: 0;
}
.bg-image {/*背景图样式*/
background-image: url('background.jpg');/*引入背景图*/
background-size: cover;/*将背景图等比缩放填满整个容器*/
height: 100%;/*设置背景高度为100%*/
position: relative;
}
.content {/*容器样式*/
position: absolute;/*绝对定位*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);/*居中*/
}

首先，大家需要将HTML和Body的高度都设为100%，这样才能让背景图占据整个屏幕。然后，大家创建一个背景图的样式，将背景图引入，并将背景图等比缩放填满整个容器。接下来，大家再创建一个容器样式，并将其绝对定位。最后，大家再通过transform属性将容器居中即可。

需要注意的是，如果你的背景图并不是很大，可能会拉伸变形，所以最好选择高质量的图片来避免这种情况。

好了，大家已经介绍了如何让CSS背景图填充整个屏幕，并且给出了相应的CSS代码示例，希望本文能够帮助网页设计者更好地运用CSS技巧。