我尝试在 css 中使用
background-image
作为按钮背景,但这仅适用于图像,不适用于视频。那么,有没有办法把视频作为按钮的背景呢?我正在尝试制作一个以循环静音视频作为背景的按钮。
一种方法是在充当按钮的容器内使用 HTML5 元素和绝对定位。将“your-video-file.mp4”替换为您的视频文件的路径。
.button-container {
position: relative;
display: inline-block;
overflow: hidden;
}
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* This prevents the video from capturing clicks */
}
.button {
position: relative;
z-index: 1;
display: inline-block;
padding: 10px 20px;
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 5px;
color: #333;
font-size: 16px;
cursor: pointer;
outline: none;
}
<div class="button-container">
<video class="video-background" autoplay muted loop>
<source src="https://youtu.be/u31qwQUeGuM?si=UKidIYaF95RiWpEk" type="video/mp4">
<!-- Add more source tags for different video formats if needed -->
Your browser does not support the video tag.
</video>
<button class="button">Your Button Text</button>
</div>