在网页设计中，有时我们需要将照片设置为满屏显示，以营造一种视觉冲击力。CSS 提供了多种方法来实现这一效果，下面将详细介绍如何使用 CSS 实现照片的满屏裁剪，让你的网页更加生动有趣。
一、背景图片覆盖
1.1 基本原理
使用 CSS 的
background-image
属性可以设置元素的背景图片。通过设置
background-size
属性为
cover
，可以使背景图片覆盖整个元素，即使图片比例与元素不同，也能通过拉伸或压缩来填充整个元素。
1.2 代码示例
body {
background-image: url(‘bg.jpg’);
background-size: cover;
background-position: center;
}
1.3 注意事项
使用背景图片时，请确保图片尺寸足够大，以免在放大时出现像素化。
如果图片背景不清晰，可以在图片下方设置一个背景颜色，以保持视觉效果。
二、视频全屏播放
2.1 基本原理
使用 HTML5 的