我在 Bootstrap 5 中有一個簡單的頁面。有多個具有不同背景顏色的部分，并且我有一些邊緣參差不齊的影像，以在某些部分之間創建不規則的邊界：
頂部影像實際上在藍色部分內，底部影像在綠色部分內，但由于沒有間隙，它看起來像是中間部分的一部分。它在桌面解析度下運行良好，但如果將其降低到移動解析度，瀏覽器會在影像和部分邊緣之間添加間隙：
我不認為這與影像是 SVG 有任何關系，因為我將它們轉換為 PNG 并且它仍然做同樣的事情。我已經在示例中行內了 SVG，但在實際頁面上它們是外部檔案。我已經 F12 了，我看不到任何可以解釋它的填充或邊距。
有任何想法嗎？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<div class="container-fluid bg-primary px-0">
<div class="container">
<p class="py-5 mb-0">Some Content</p>
</div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1491 57.8" style="enable-background:new 0 0 1491 57.8;" xml:space="preserve">
<style type="text/css">.st0 { fill: #F6F4F1; }</style>
<path class="st0" d="M-1.2,64c0-23,0-37.2,0-36.5c0,20.9,22.8-6,36.6-6s19.8-1,39.6-1s32.7-2,37.7-2s78.3,2,84.2,2s55.5,4,67.4,4 s42.6,6,90.2,3s166.4-1,166.4-1s46.6-9,54.5-3s48.5,1,76.3,1s27.7-1,58.5,2s78.3,3,101,0s66.4-3,66.4-3s45.6-2,50.5,1s55.5,3,78.3,0 c22.8-3,51.5-5,61.4-3s59.4,9,68.4,6s42.6-2,48.6-4s49.5-4,58.4-3s48.6,3,48.6,3s5.9-8,22.8-8c16.8,0,23.8-2,29.7,0s21.8,11,37.7,11 s22.8-6,30.7-6s24.8-1,47.6-2s31-1.1,31-1.1l0.2,47C1491.3,63-1.2,62.6-1.2,64z"/>
</svg>
</div>
<div class="container-fluid px-0" style="background-color: #F6F4F1;">
<div class="container">
<p class="py-5 mb-0">Some Content</p>
</div>
</div>
<div class="container-fluid bg-success px-0">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1491 66.8" style="enable-background:new 0 0 1491 66.8;" xml:space="preserve">
<style type="text/css">.st0 { fill: #F6F4F1; }</style>
<path class="st0" d="M1492.2-0.5V16l-27.7,11l-17.8-6c0,0-15.8-3-24.8,1s-38.6,2-51.5,2s-36.7-3-36.7-3s-4-12-28.7-2s-73.3,3-77.3,3 s-56.5-1-56.5-1s-46.6,7-56.5,11s-82.2-2-82.2-2l-45.6-9c0,0-8.9,2-18.8,8s-29.7,8-34.7,6s-40.6-11-44.6-11s-69.3,14-73.3,14 s6.9-7-30.7-8s-47.5,5-60.4,9s-68.4-3-72.3-3s-68.4-1-74.3,3s-55.5-4-55.5-4s-30.7-7-45.6,1s-31.7,9-48.5,7c-16.8-2-30.7-2-30.7-2 l-22.8,14c0,0-40.6-3-45.6-3s-32.7-3-32.7-3s24.8,17-17.8,6s-64.4-6-64.4-6s-34.7,1-38.6,1s-19.8-1-19.8-1s-15.9-21-39.6-19 s-37.7,6-37.7,6l-25.8,8L23,49l-23.8,6c0,0,0-23.1,0-57.5C-0.8-2.5,1491.7-0.5,1492.2-0.5z"/>
</svg>
<div class="container">
<p class="py-5 mb-0">Some Content</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>
</html>uj5u.com熱心網友回復：
我設法在另一個 SO 帖子中找到了解決方案。
uj5u.com熱心網友回復：
有一個類似的問題，并將 SVG 部分放入<div>寬度為 100% 且填充或邊距為零的 a 中。那應該可以解決您的問題。
<div class="container-fluid bg-primary px-0">
<div class="container">
<p class="py-5 mb-0">Some Content</p>
</div>
<div class="w-100 m-0 p-0">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1491 57.8" style="enable-background:new 0 0 1491 57.8;" xml:space="preserve">
<style type="text/css">.st0 { fill: #F6F4F1; }</style>
<path class="st0" d="M-1.2,64c0-23,0-37.2,0-36.5c0,20.9,22.8-6,36.6-6s19.8-1,39.6-1s32.7-2,37.7-2s78.3,2,84.2,2s55.5,4,67.4,4 s42.6,6,90.2,3s166.4-1,166.4-1s46.6-9,54.5-3s48.5,1,76.3,1s27.7-1,58.5,2s78.3,3,101,0s66.4-3,66.4-3s45.6-2,50.5,1s55.5,3,78.3,0 c22.8-3,51.5-5,61.4-3s59.4,9,68.4,6s42.6-2,48.6-4s49.5-4,58.4-3s48.6,3,48.6,3s5.9-8,22.8-8c16.8,0,23.8-2,29.7,0s21.8,11,37.7,11 s22.8-6,30.7-6s24.8-1,47.6-2s31-1.1,31-1.1l0.2,47C1491.3,63-1.2,62.6-1.2,64z"/>
</svg>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/455850.html
上一篇：React中的影片SVG