我在下面的網站上自定義了一個 SVG 檔案，以在一個塊中制作背景：
這正是我想要達到的結果：
現在我想下載 SVG 檔案以減輕我的 style.css 檔案，但沒有自定義樣式應用于 SVG：
我在我的塊上使用此代碼：
.embedded-entity .node--type-track {
padding: 1rem 1rem 0.2rem 1rem;
border: 2px solid #ced8dd;
background: #f7f9fa;
background-image: url("/themes/subtheme_olivero/images/topography.svg");
}
背景有效，但是如何用這種#f7f9fa顏色放置線條？
uj5u.com熱心網友回復：
在您在https://svgshare.com/i/iQk.svg上共享的檔案中，您首先從https://heropatterns.com/復制的代碼中沒有填充不透明度。因此背景顏色沒有顯示出來——它只是一個黑白圖案。
在這個例子中，我選擇了更簡單的模式。這個想法是你有1）前景色，2）背景色和3）填充不透明度。在我的示例中，背景顏色是綠色。這是定義為影像后面/背景的顏色。前景色（紅色）定義了 SVG 中定義的形狀的顏色——您可以在 SVG 代碼中將其視為填充屬性。最后你有填充不透明度（也是一個 SVG 屬性），它定義了在圖案中可以看到多少背景如果它是 0，那么它只是你可以看到的純色背景，如果它是 1，那么形狀如果 SVG具有前景色的顏色。
div {
width: 300px;
height: 300px;
background-color: green;
background-image: url("data:image/svg xml,");
}<div></div>當我看到您的示例螢屏轉儲時，它看起來前景色可能太暗了。在下一個示例中，我使用了背景顏色、灰色填充和 0.3 的填充不透明度。
div {
width: 300px;
height: 300px;
background-color: #f7f9fa;
background-image: url("data:image/svg xml,");
}<div></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/492502.html