毕业设计GUI开发：将3张PNG图片转为功能按钮的HTML/CSS实现咨询

我正在为毕业设计开发GUI界面，为提升人机工程学体验设计了如图所示的简洁布局。作为HTML/CSS初学者，我尝试多种方法将PNG图片转为可触发摄像头录像功能的按钮，当前核心需求是实现图中所示的按钮效果。

我的HTML代码 #

<section class="lg">
    <nav>
        <a href="index.html"><img src="images/logo.png"></a>
    </nav>
</section>

关联的CSS代码 #

*{
    margin: 0;
    padding: 0;
}
.lg{
    min-height: 100vh;
    width: 100%;
    background-image: url(images/Background2.png);
    background-position: center;
    background-size: cover;
    position:relative;

}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: center;
}

解决方案 #

1. 搭建按钮基础结构 #

在HTML中添加录像按钮元素，直接嵌入PNG图片并绑定点击事件：

<section class="lg">
    <nav>
        <a href="index.html"><img src="images/logo.png"></a>
    </nav>
    <!-- 新增录像按钮容器 -->
    <div class="record-wrap">
        <button id="recordBtn" class="record-btn">
            <img src="你的开始录像按钮.png" alt="开始录像">
        </button>
    </div>
</section>

2. 适配界面的CSS样式 #

调整CSS让按钮居中显示，同时添加交互反馈效果：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.lg{
    min-height: 100vh;
    width: 100%;
    background-image: url(images/Background2.png);
    background-position: center;
    background-size: cover;
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}
nav{
    padding: 2% 6%;
}
.record-btn{
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.record-btn img{
    width: 90px; /* 根据你的图片尺寸调整 */
    height: auto;
    transition: transform 0.2s ease;
}
/* 点击按压效果 */
.record-btn:active img{
    transform: scale(0.93);
}

3. 摄像头录像功能实现（JavaScript） #

添加JS代码完成点击按钮触发/停止录像的逻辑：

const recordBtn = document.getElementById('recordBtn');
let mediaRecorder;
let recordedChunks = [];
let isRecording = false;

recordBtn.addEventListener('click', async () => {
    try {
        if (!isRecording) {
            // 请求摄像头和麦克风权限
            const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
            
            mediaRecorder = new MediaRecorder(stream);
            recordedChunks = [];

            // 收集录像数据
            mediaRecorder.ondataavailable = (e) => {
                if (e.data.size > 0) recordedChunks.push(e.data);
            };

            // 录像结束后生成下载文件
            mediaRecorder.onstop = () => {
                const blob = new Blob(recordedChunks, { type: 'video/webm' });
                const downloadUrl = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = downloadUrl;
                a.download = `录像_${new Date().getTime()}.webm`;
                a.click();
                URL.revokeObjectURL(downloadUrl);
                // 关闭摄像头流
                stream.getTracks().forEach(track => track.stop());
                // 切换回开始按钮图片
                recordBtn.querySelector('img').src = '你的开始录像按钮.png';
            };

            mediaRecorder.start();
            isRecording = true;
            // 切换为停止按钮图片
            recordBtn.querySelector('img').src = '你的停止录像按钮.png';
        } else {
            // 停止录像
            mediaRecorder.stop();
            isRecording = false;
        }
    } catch (err) {
        console.error('摄像头访问失败:', err);
        alert('无法访问摄像头，请检查浏览器权限设置');
    }
});

关键提示 #

• 替换代码中你的开始录像按钮.png、你的停止录像按钮.png为实际图片路径
• 摄像头功能仅支持HTTPS环境或本地localhost访问（浏览器安全限制）
• 可根据界面风格调整按钮大小、动画参数，匹配你的设计需求

内容的提问来源于stack exchange，提问作者Abdelmalek Mallek