1、html中将需要加背景图的div（other-product）包裹住定位文字的div（other-product-box）和遮罩层的div（indexInner）

2、设置最外边框CSS样式

.other-product{
    position: relative;
    background-size: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 675px;
    background-size: 100%;
}

3、设置遮罩层的CSS样式

.indexInner{
    background: rgba(0,0,0,0.4);
    height: 675px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

4、设置最上层文字div的CSS样式

.other-product-box{
    position: absolute;
    margin: 0 auto;
    width: 100%;
    -webkit-box-sizing: border-box;
    padding: 0 10px;
    z-index: 999;
    max-width: 1180px;
    left: 152px;
}

5、完结

# css # html # css3
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

Handy 离线语音转写教程：免费开源，本地跑不连网

你肯定遇到过：语音输入 5 分钟，云转写服务要登录、要付费；或者出差没网，想口述一段会议纪要，发现全都没法用。Handy 离线语音转写工具就是为解决这个问题做的，声音全程不出你的电脑。## 🎯 这个工具是什么Handy 是一款免费、开源、跨平台（Windows / macOS / Linux）的离线语音转写应用。按住快捷键说话，松手后文字直接粘贴进任意输入框，全程不联网。核心能力就三条：

avatar 天工造物局

Supabase Edge Functions 编写与部署完整指南：Deno 运行时上的无服务器利器

Supabase Edge Functions 是基于 Deno 运行时编写、面向 Web 的无服务器函数服务，帮你把后端逻辑部署到全球边缘节点。作为 Postgres 开发平台的核心能力之一，它让你用 TypeScript 就能快速搭建低延迟的 API 端点、Webhook 接收器和 AI 集成服务，无需管理任何服务器。本文将从零带你完成一个 Edge Function 的创建、本地调试与全球部

avatar 天工造物局

celld从v0.1.0到v0.2.0为何不能滚动升级：两个破坏性变更详解

celld 是一个自托管、分布式的 Durable Objects 开源守护进程，它在你自己的机器上运行 Cloudflare Workers，每个对象对应一个独立的 SQLite 数据库，并持续复制到你自己拥有的 S3 兼容存储桶中。如果你正准备把 v0.1.0 的集群（fleet）升级到 v0.2.0，这篇文章必须先读：这次升级**不能滚动升级**，必须采用"先停光、再启动"的一次性发布方式。

avatar 天工造物局