首页html图片沾满整页用src

html图片沾满整页用src

时间: 2024-09-10 08:27:32 浏览: 99

CSS 实现高度自适应铺满整屏的实现

在自己写demo的过程中，想使用display:flex实现垂直居中，代码如下： <style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-body{ width: 600px; height: 260px; border: 1px solid #000; } </sty

在HTML中，如果你想让一张图片覆盖整页，可以通过设置图片的`src`属性来引入图片，并且利用CSS样式来调整图片的大小使其适应整个页面。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> html { background: url('图片地址') no-repeat center center fixed; background-size: cover; } </style> </head> <body> </body> </html> ``` 在这个例子中，`<html>`标签的背景通过`background`属性设置。`url('图片地址')`是用来指定图片的源地址，替换为你的图片链接。`no-repeat`表示图片不会重复平铺，`center center`表示图片在水平和垂直方向都居中，`fixed`表示背景图片固定不动，不会随着页面滚动而滚动。`background-size: cover;`确保背景图片覆盖整个页面区域，但图片会保持其宽高比，可能会裁剪图片。需要注意的是，使用图片作为背景可能会增加页面的加载时间，特别是如果图片文件很大或者网络速度慢的情况下。此外，如果没有版权许可，使用图片可能会涉及版权问题。

阅读全文