我有兩個 .svg 檔案是我的 ux/ui 設計師（來自 Fiverr）提供的。.svg 檔案對我來說是新的。
我有一個他給我的模擬。模擬顯示背景，然后是中間層作為 .svg 檔案，然后是一個站在計算機旁的人作為 .svg 檔案。
我們稱它們為 middleLayer.svg，而插圖 WEB - man.svg
我以前從未這樣做過，但我推測可以通過以下方式完成：
- 從檔案流中取出兩個 div，為每個 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，灰色形狀。
I'm suspicious my technique is entirely incorrect... perhaps even having the uxui designer give me .svg files of the two images was the wrong approach? Correct me please.
Note that searching "css make div transparent except for background image" and various forms shows lots of ways to make the background image itself transparent. I want to keep the svg outline of the background image while making the rest of the div transparent, so the page shows all three layers at once. But again it might be the wrong approach.
uj5u.com熱心網友回復：
您可以使用照片編輯器更輕松地完成此任務，并且頁面加載會更好
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312449.html
標籤：javascript html css svg