当前位置：首页 > 行业动态 > 正文

html网页黑白色

通过CSS滤镜属性设置 filter: grayscale(100%)，或覆盖元素颜色为黑白，使网页呈现灰度

基础结构搭建

使用标准HTML框架，移除所有带有颜色的样式定义,核心代码结构如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">本页面无标题</title>
    <style>
        body {
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        a {
            color: #fff;
            text-decoration: none;
        }
        a:visited {
            color: #ccc;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            padding: 10px;
            vertical-align: top;
        }
    </style>
</head>
<body>

内容区域划分（使用表格布局）

通过表格实现内容分区,典型结构示例：

区域类型 代码示例
顶部导航栏 <tr><td colspan="2">导航菜单内容</td></tr>
页脚信息 <tr><td colspan="2">版权信息</td></tr>

完整表格结构：

html网页黑白色 第1张

<table>
    <tr>
        <td colspan="2">网站导航 | 首页 | 关于我们 | 联系方式</td>
    </tr>
    <tr>
        <td>
            <h3>左侧栏目</h3>
            <p>这里是左侧内容区域，使用深灰色背景区分</p>
            <ul>
                <li>列表项一</li>
                <li>列表项二</li>
            </ul>
        </td>
        <td>
            <h3>主体内容</h3>
            <p>主体内容区域，白色文字搭配黑色背景</p>
            <blockquote>引用文本自动继承黑白风格</blockquote>
        </td>
    </tr>
    <tr>
        <td colspan="2">© 2023 公司名称 保留所有权利</td>
    </tr>
</table>
</body>
</html>

视觉增强方案

  1. 灰度控制：通过调整opacity属性创建层次感

    h3 {
    opacity: 0.8;
}
p {
    opacity: 0.7;
}

  2. 边框处理：使用白色/灰色细线划分区域

    td {
    border: 1px solid #444;
}

  3. 特殊元素样式：

    img {
    filter: grayscale(100%) brightness(0.8);
}
.highlight {
    background-color: #222;
    padding: 5px;
    border-radius: 3px;
}

常见问题与解决方案

Q1：如何实现纯黑白反相效果？

解决方案：交换背景色与文字色，增加对比度

body {
    background-color: #fff;
    color: #000;
}
a {
    color: #000;
}

Q2：怎样保持图片黑白效果？

解决方案：使用CSS滤镜强制灰度处理

img {
    -webkit-filter: grayscale(100%) invert(100%);
    filter: grayscale(100%) invert(100%);
0

相关文章