如何在 CSS 中將 2 個不同的 div 放在一起？現在影像 Row 和 col 與上面的 SVG blob 是分開的。如何使用 blob 作為背景？基于下面的代碼，它被分開了，不知道如何將它們合并為背景 blob
查看下圖便于理解
<Row className="p-5">
<div className={classes.blob}>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path
fill="#08BDBA"
d="M18.3,-12.9C32.5,-19.3,59.1,-29.2,70.8,-25.8C82.5,-22.4,79.3,-5.7,75,9.4C70.7,24.5,65.1,38.1,53.6,40.2C42.1,42.4,24.5,33.1,11.6,34.7C-1.3,36.2,-9.6,48.5,-16.6,49.6C-23.6,50.7,-29.4,40.6,-38,32.1C-46.6,23.6,-58.1,16.8,-56.4,9.8C-54.7,2.9,-39.8,-4.2,-34.8,-16.2C-29.8,-28.2,-34.8,-45,-30.6,-43.2C-26.5,-41.5,-13.2,-21.1,-5.6,-12.4C2,-3.6,4,-6.5,18.3,-12.9Z"
transform="translate(100 100)"
/>
</svg>
</div>
<Col sm={12} lg={6}>
<Image
src="/images/heroanimation.gif"
alt="Image Show Max"
width={500}
height={500}
/>
</Col>
uj5u.com熱心網友回復：
將兩個影像保持在同一列中，然后給出 rowposition: relative和 2 個 div position: absolute，然后您可以根據需要更改頂部、右側、底部、左側。
<Row className="p-5">
<Col sm={12} lg={6}>
<div className={classes.blob}>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path
fill="#08BDBA"
d="M18.3,-12.9C32.5,-19.3,59.1,-29.2,70.8,-25.8C82.5,-22.4,79.3,-5.7,75,9.4C70.7,24.5,65.1,38.1,53.6,40.2C42.1,42.4,24.5,33.1,11.6,34.7C-1.3,36.2,-9.6,48.5,-16.6,49.6C-23.6,50.7,-29.4,40.6,-38,32.1C-46.6,23.6,-58.1,16.8,-56.4,9.8C-54.7,2.9,-39.8,-4.2,-34.8,-16.2C-29.8,-28.2,-34.8,-45,-30.6,-43.2C-26.5,-41.5,-13.2,-21.1,-5.6,-12.4C2,-3.6,4,-6.5,18.3,-12.9Z"
transform="translate(100 100)"
/>
</svg>
</div>
<Image
src="/images/heroanimation.gif"
alt="Image Show Max"
width={500}
height={500}
/>
</Col>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411886.html
標籤：
下一篇：漢堡圖示不顯示