亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何重疊兩個不同的 SVG?

如何重疊兩個不同的 SVG?

Qyouu 2022-12-02 10:37:53
我試圖重疊兩個以前是一個 SVG 的 SVG - 我只是將層分開以便我有更多的控制權。這是我的代碼:<Grid container direction="row" justify="center" style={{ height: '90vh', paddingTop: 80, backgroundImage:`url("/media/bg/bg-2.svg")`, backgroundSize:'cover'}}>                    <Grid item sm={5} style={{ color: 'white', maxWidth: 500, paddingTop: 140 }}>                        <h1 style={{ fontWeight: 700, color: '#E2A2A5' }}> Lorem Ipsum </h1>                        <p style={{fontSize: 20}}>                            Lorem Ipsum                        </p>                    </Grid>                    <Grid item sm={6}>                         <img src={toAbsoluteUrl('/media/images/computer.svg')} alt="computer" />                        <img src={toAbsoluteUrl('/media/images/book.svg')} alt="book" />                                            </Grid>                </Grid>外觀如何我的目標是讓兩個 SVG 像這樣重疊在一起我知道這可能是一個 SCSS/CSS 問題,但不知道什么樣的代碼會給我想要的結果。非常感謝所有幫助:)
查看完整描述

1 回答

?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

您可以將這兩個項目的容器設置為position: relative

然后將 svgs 設置為position: absolute

這樣,您可以在 svg-s 上設置z-index 以獲得深度,這意味著您想要將哪個放在另一個之上。

對于定位,您可以使用bottom、topleftright將元素放在您想要的位置,您可以更好地控制它們。

編輯:

之所以position: relative重要是因為元素是position: absolute從第一個父節點定位的 position: relative。


查看完整回答
反對 回復 2022-12-02
  • 1 回答
  • 0 關注
  • 358 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號