javascript - 我可以让 div 只显示 svg 图像的内容,否则是透明的,所以我可以将两个 svg 堆叠在一起吗?
问题描述
我的 ux/ui 设计师(来自 Fiverr)给了我两个 .svg 文件。.svg 文件对我来说是新的。
我有一个他给我的嘲笑。模拟显示背景,然后是 .svg 文件的中间层,然后是站在计算机旁的人作为 .svg 文件。
我们称它们为 middleLayer.svg,以及插图 WEB - man.svg
我以前从未这样做过,但我推测它可以通过以下方式完成:
- 从文档流中取出两个 div,为每个分配一个 .svg
- 然后将它们与 z-index 值堆叠在一起,同时
- 使除实际 svg 轮廓本身之外的所有内容都透明。
像这样:
<div className="d-flex justify-content-center">
<div
id="landing_left-and-banner"
className="d-flex justify-content-center landing_width-adjustment landing_svg-positioning landing_bg-svg-div"
></div>
<div
id=""
className="landing_width-adjustment landing_svg-positioning landing_bg-svg-div"
></div>
</div>
#landing_left-and-banner {
padding-top: 20px;
padding-bottom: 20px;
background-color: $uxui-dg;
background-image: url("../../images/Illustration WEB - man.svg");
background-repeat: no-repeat;
background-size: 70% 70%;
background-position: center;
z-index: 100;
opacity: 0;
}
.landing_bg-svg-div {
background-image: url("../../images/middleLayer.svg");
background-size: 90% 90%;
background-repeat: no-repeat;
background-position: 100% 100%;
border: 2px solid red;
z-index: 2;
}
.landing_svg-positioning {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85vh;
}
.landing_width-adjustment {
width: auto;
}
它们是用来堆叠的……它只是显示了中间层 svg,灰色的形状。
我怀疑我的技术完全不正确......也许甚至让 uxui 设计师给我两个图像的 .svg 文件是错误的方法?请纠正我。
请注意,搜索“css 使除背景图像之外的 div 透明”和各种形式显示了许多使背景图像本身透明的方法。我想保持背景图像的 svg 轮廓,同时使 div 的其余部分透明,因此页面一次显示所有三层。但这又可能是错误的方法。
解决方案
您可以使用照片编辑器更轻松地完成此任务,并且页面加载会更好
推荐阅读
- python - 如何运行依赖于项目代码的 ray 任务
- python - 在 Windows 上安装 PyQt5 时出错
- laravel - Laravel 如何处理根域和子域的相同 URL
- c# - FindAsync 仅在主键中搜索还是可以创建复杂的查询?
- javascript - 如何等到函数在节点中完成运行(for循环)
- android - 带有多封电子邮件的 Android 数据绑定和 Textview;如何设置电子邮件主题
- python - 在当前进程在 python 中完成其引导阶段之前,已尝试启动一个新进程
- javascript - 如何检测浏览器是否支持 SharedArrayBuffer?
- c++ - 如何在 C++ 中正确地为基类成员起别名?
- python - 我可以做些什么来让 Python 程序在 x 秒后再次要求输入?