feat(video): add video fit toggle button and update styling
- Add toggle button to switch between 'cover' and 'contain' video fit modes - Update video background styling for simpler positioning - Group upload and fit buttons in a flex container
This commit is contained in:
@@ -15,15 +15,12 @@ html, body {
|
||||
/* --- 视频背景 --- */
|
||||
#bg-video {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1; /* 将视频置于最底层 */
|
||||
object-fit: cover; /* 关键:让视频填满整个屏幕而不变形 */
|
||||
object-fit: cover; /* 默认填满整个屏幕(裁剪),JS会切换它 */
|
||||
background-color: #1a1a1a; /* 视频加载前的背景色 */
|
||||
}
|
||||
|
||||
@@ -77,6 +74,11 @@ html, body {
|
||||
/* 这个区域是弹性填充的,所以不需要太多样式 */
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
gap: 10px; /* 按钮之间的间距 */
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
|
||||
Reference in New Issue
Block a user