1. 后端生成验证码图片：服务器端生成一个包含随机字符的图片，并将正确的答案存储起来（在Session中）。
  2. 前端显示验证码：在前端HTML中，使用 <img> 标签来显示后端生成的图片。
  3. CSS3 美化：使用CSS3来设计验证码及其相关输入框的样式，使其更美观、更友好。

第一步：后端生成验证码图片 (以PHP为例)

这是最核心的一步,服务器需要创建一个图片，画上干扰线、噪点，并写入随机字符。

css3网页验证码怎么添加图片
（图片来源网络，侵删）

generate_captcha.php (后端代码示例)

<?php
// 1. 开启Session
session_start();
// 2. 定义验证码字符集
$chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$code = '';
$length = 4; // 验证码长度
for ($i = 0; $i < $length; $i++) {
    $code .= $chars[mt_rand(0, strlen($chars) - 1)];
}
// 3. 将验证码码存入Session，用于后续验证
$_SESSION['captcha_code'] = $code;
// 4. 创建图片资源
$image = imagecreatetruecolor(120, 40);
$bgcolor = imagecolorallocate($image, 255, 255, 255); // 背景色
imagefill($image, 0, 0, $bgcolor);
// 5. 添加干扰线
for ($i = 0; $i < 5; $i++) {
    $color = imagecolorallocate($image, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
    imageline($image, mt_rand(0, 120), mt_rand(0, 40), mt_rand(0, 120), mt_rand(0, 40), $color);
}
// 6. 添加噪点
for ($i = 0; $i < 100; $i++) {
    $color = imagecolorallocate($image, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255));
    imagesetpixel($image, mt_rand(0, 120), mt_rand(0, 40), $color);
}
// 7. 将验证码写入图片
$textColor = imagecolorallocate($image, 0, 0, 0); // 文字颜色
// 使用 imagettftext 可以使用自定义字体，效果更好
// imagettftext($image, 20, 0, 30, 30, $textColor, 'path/to/your/font.ttf', $code);
// 这里使用更简单的 imagestring
imagestring($image, 5, 30, 12, $code, $textColor);
// 8. 输出图片
header('Content-Type: image/png');
imagepng($image);
// 9. 释放内存
imagedestroy($image);
?>

关键点：

  • $_SESSION['captcha_code'] = $code; 将生成的码存入Session，当用户提交表单时，我们会用这个值去比对用户输入。
  • header('Content-Type: image/png'); 告诉浏览器这是一个PNG图片。
  • 这个PHP文件本身就是一个图片,可以直接在 <img> 标签的 src 中引用。

第二步：前端HTML显示验证码

我们创建一个HTML文件,其中包含一个表单，表单中需要有一个 <img> 标签来显示我们刚刚创建的PHP验证码。

index.html (基础HTML结构)

css3网页验证码怎么添加图片
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">带验证码的登录表单</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form action="login.php" method="post" id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group captcha-container">
                <label for="captcha">验证码</label>
                <div class="captcha-wrapper">
                    <!-- 
                      src 指向我们后端生成验证码的PHP文件。
                      我们可以加一个时间戳参数来防止浏览器缓存图片，
                      导致刷新后验证码不变，这里是使用JS实现的，下面CSS部分会展示另一种方式。
                    -->
                    <img id="captcha-img" src="generate_captcha.php" alt="验证码，看不清楚请点击刷新">
                    <button type="button" id="refresh-btn" class="refresh-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
                        </svg>
                    </button>
                </div>
                <input type="text" id="captcha" name="captcha" placeholder="请输入上方验证码" required>
            </div>
            <button type="submit" class="login-btn">登录</button>
        </form>
    </div>
    <script>
        // 简单的JS刷新验证码功能
        document.getElementById('refresh-btn').addEventListener('click', function() {
            const captchaImg = document.getElementById('captcha-img');
            // 在图片URL后添加一个随机参数，强制浏览器重新请求
            captchaImg.src = 'generate_captcha.php?' + new Date().getTime();
        });
    </script>
</body>
</html>

关键点：

  • <img src="generate_captcha.php">：这是核心，直接将PHP的输出作为图片源。
  • 刷新按钮：为了提升用户体验，我们添加了一个刷新按钮，点击它会通过JavaScript改变图片的 src URL，浏览器会因此重新请求图片，生成一个新的验证码。

第三步：使用CSS3美化验证码区域

我们使用CSS3来让这个表单和验证码区域看起来更专业、更现代。

style.css (CSS3美化代码)

/* 基础样式重置和页面布局 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.login-container {
    background-color: #ffffff;
    padding: 2rem 3rem;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
h2 {
    color: #333;
    margin-bottom: 1.5rem;
}
.form-group {
    margin-bottom: 1.25rem;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 500;
}
input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* 确保padding不会增加宽度 */
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}
input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
}
/* 验证码区域的CSS3美化 */
.captcha-container {
    display: flex;
    flex-direction: column;
}
.captcha-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* 图片和刷新按钮之间的间距 */
}
#captcha-img {
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
#captcha-img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* 刷新按钮的样式 */
.refresh-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}
.refresh-btn:hover {
    background-color: #f0f0f0;
    color: #333;
}
.refresh-btn svg {
    width: 20px;
    height: 20px;
}
/* 登录按钮 */
.login-btn {
    width: 100%;
    padding: 0.75rem;
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}
.login-btn:hover {
    background-color: #357abd;
}
.login-btn:active {
    transform: scale(0.98);
}

总结与扩展

  1. 完整流程：

    css3网页验证码怎么添加图片
    （图片来源网络，侵删）
    • 用户访问 index.html，看到表单和验证码图片。
    • 用户输入用户名、密码和验证码，点击登录。
    • 表单数据被发送到 login.php。
    • login.php 从 $_SESSION['captcha_code'] 中取出正确的验证码，与用户提交的 $_POST['captcha'] 进行比对。
    • 如果一致,则进行登录逻辑；如果不一致，则提示用户“验证码错误”。

  2. CSS3 美化亮点：

    • 渐变背景：background: linear-gradient(...) 创建了柔和的背景。
    • 阴影效果：box-shadow 为容器和输入框增加了层次感。
    • 圆角：border-radius 让设计更现代。
    • 过渡动画：transition 为悬停、聚焦等状态添加了平滑的动画效果，提升了交互体验。
    • Flexbox布局：使用 display: flex 轻松实现了验证码图片和刷新按钮的水平对齐。
    • 悬停效果：鼠标悬停在图片和按钮上时的视觉反馈。

  3. 常见验证码类型：

    • 图片验证码：我们上面实现的，最经典。
    • 滑动验证码：用户需要按住滑块并拖动到指定位置，这需要更复杂的JS和后端交互来验证滑块的轨迹和时间。
    • 点选验证码：图片中显示几个文字，用户需要按顺序点击对应的文字。

这个例子涵盖了从后端生成到前端展示和CSS美化的完整流程,你可以基于此进行扩展和修改。