如何在 CSS 中制作前景图像
如何在 CSS 中制作前景图像
结构
- 可以用了 CSS
- 在哪里放置
** <div/>** - 为什么 作品 ☕
- 其他 命题 ✨
- 学 更多
即用型解决方案
使用原始 CSS：
/** 前景图像 **/
#前景{
位置：固定；
顶部：0；
左：0；
z 指数：50； //确保它有最高的z-index
宽度：100vw；
高度：100vh；
指针事件：无；
背景图像：url（“../public/assets/img/Rectangle-Fullscreen-Noise-1.svg”）；
背景重复：重复；
}
使用 Tailwind CSS：
<div className={‘z-50 pointer-events-none fixed top-0 left-0 w-screen h-screen bg-repeat bg-[url('../public/assets/img/Rectangle-Fullscreen-Noise-1.svg')]’}/>
在哪里放置 <div/>
这主要取决于 范围 你的 前景 .在以下示例中，我将前台应用到整个 Web 应用程序。
没有框架
HTML版直接上图，放前台div（直接） 里面 这 身体 标签。
笔记： 您可以将 div 放在
_ <body>_标记，只要是直接子代。
HTML example
使用框架
您可以通过将 前景 div中的 最高 容器 可用，同时遵循 最好的 实践 ，例如， 不写 这段代码在 索引.html ，在大多数情况下，它会是一个类似的文件 索引.jsx 或者 索引.tsx .
JSX/TSX example
为什么这样有效☕
我们首先使用 位置：固定 , 以确保我们的前景 div 已从 正常文件流 ， 然后 没有创建空间 为它在 页面布局 .
我们希望它的 **z-index** 拥有 最高值 与其他容器相比，因此它是 在上面 一切。
请注意，宽度和高度的值不在 % 而是在视口单位中 大众 和 vh , 依次代表 视口宽度 和 视口高度 ，因此使其 响应式 覆盖整个屏幕。
指针事件：无 是 钥匙 在这里，因为它 允许用户交互 与应用程序一样，好像没有 <div/> 涵盖一切。
最后，我们需要使用 背景重复 如果我们使用的图像是 更小 比 屏幕 的用户。
其他建议✨
如果您的目标不是覆盖整个 Web 应用程序，而是一个特定的容器（例如，一个 <div> )，那么你可以使用 位置：相对 .
这使我们能够 复位 这 ＃前景 元素从其默认位置附近 。容器 .
我们可以用 消极的 最佳 或/和 剩下 值移动 ＃前景 从它的默认位置到我们需要它的位置。例如，如果 。容器 正在承担 全屏宽度 ，那么 剩下 值将等于 0 和 最佳 将等于它的高度。
CSS to put a foreground on a container
顺便说一句，如果你像我一样，并且 通过构建更好地学习 ， 我接到你了。这里有一个 现场工作密码笔 这适用于我们刚刚谈到的内容：
了解更多
这里有一些 外部资源 您可以使用它来了解有关该主题的更多信息。
[
响应式设计 - 学习 Web 开发 | MDN
响应式设计是指站点或应用程序设计对查看它的环境做出响应。它…
developer.mozilla.org
](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
[
如何使用 CSS 添加多个背景图像
阅读有关如何在 background-image、background-position 的帮助下使用多个背景图像的信息……
www.w3docs.com
](https://www.w3docs.com/snippets/css/how-to-use-multiple-background-images-with-css.html)
[
如何将一个div覆盖在另一个div上
公认的解决方案效果很好，但 IMO 缺乏对其工作原理的解释。下面的例子归结为……
stackoverflow.com
](https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div)
[
CSS：层叠样式表 | MDN
视口百分比长度单位基于四种不同的视口大小：小、大、动态和默认…
developer.mozilla.org
](https://developer.mozilla.org/en-US/docs/Web/CSS/length)
这篇文章就是这样， 谢谢你 为了做到这一点，我希望你获得了新的信息✨。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
