html背景原比例全屏显示
时间: 2024-10-20 18:08:02 浏览: 12
全屏视频背景的html
HTML中想要实现背景图片按原始比例全屏显示,可以使用CSS的`background-size`属性设置为`cover`。这个值会确保背景图片完全覆盖其容器,并保持宽高比不变。同时,使用`background-position`设置为`center`,让图片居中显示。基本的语法如下:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.full-screen-background {
background-image: url('your-image-url.jpg'); /* 你的图片URL */
background-repeat: no-repeat;
background-size: cover; /* 按照内容缩放保持宽高比 */
background-position: center; /* 居中显示 */
height: 100vh; /* 全屏高度(视口高度),单位 vh 表示 viewport 的高度百分比 */
}
</style>
</head>
<body>
<div class="full-screen-background"></div>
</body>
</html>
```
阅读全文