淘先锋技术网

首页 1 2 3 4 5 6 7

css给div 加背景图片 设置全屏

CSS样式表中有一个可以给div元素添加背景图片的属性，称为“background-image”属性。如果想让这个背景图片充满整个div元素，并设置为全屏，还需要添加一些其他属性。

css给div 加背景图片 设置全屏

首先，在HTML文档中创建一个

元素，可以给它一个id属性，以方便进行CSS样式设置。 

<div id="full-screen"></div>

然后，在CSS样式表中为这个id选择器设置背景图片的路径，以及其他的几个属性。


#full-screen {
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

上面代码中，“background-size”属性设置为“cover”，意思是让背景图片充满整个div元素，即等比缩放以适应元素大小；“background-position”属性设置为“center”，是让背景图片在div元素中垂直和水平居中显示；“background-repeat”属性设置为“no-repeat”，是防止背景图片在元素中重复出现；最后，“height”属性设置为“100vh”，是让这个div元素的高度占据整个视窗（viewport）的高度。

这样设置之后，这个

元素的背景图片将会充满整个屏幕，并保持原始的长宽比。如果需要，还可以添加其他的CSS属性，如设置背景图片的透明度、模糊度等等，以满足不同的需求。