水平居中 base64 背景圖像不起作用

Question

我試圖將 base64 背景圖像居中在水平矩形 div 內，但它不起作用。

我知道這應該很簡單，我在這里研究了許多幾乎相似的問題，但沒有任何技巧奏效。 圖像沒有水平居中，我不知道為什么。 事實上，除非我明確使用像素，否則背景位置似乎沒有任何效果。

你可以在這個操場上看到它：https://codesandbox.io/s/solitary-worker-vvrx4?file=/index.html

.container {
   background: red;
   width: 100px;
   height: 16px;
   background-image:url("data:image/svg+xml;base64,...");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
}


<div class="container"></div>

有人可以幫忙嗎？ 謝謝你。

Answer 1

看起來問題出在您的 SVG 上。 對其進行了更改並生成了一個新的 base64 工作正常。 不過，我不太確定為什么會解決這個問題。

我做了什么：

• 將transform="rotate(90 8 8)"更改為transform="rotate(90)"
• 添加了特定的寬度和高度屬性width="160" height="160"

結果如下

 .icon { background: red; width: 100px; height: 16px; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; }.icon--broken { background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4IDgpIiBmaWxsPSIjMzM5OWZmIj4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIxMy45IiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMTEuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDE1LjEsOSwxNiw3LjgsMTZzLTIuMS0wLjktMi4xLTIuMUM1LjcsMTIuNyw2LjcsMTEuOCw3LjgsMTEuOHoiLz4KPC9nPgo8Zz4KCTxjaXJjbGUgY3g9IjcuOCIgY3k9IjcuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDUuOGMxLjIsMCwyLjEsMC45LDIuMSwyLjFDOS45LDkuMSw5LDEwLDcuOCwxMFM1LjcsOS4xLDUuNyw3LjlDNS43LDYuOCw2LjcsNS44LDcuOCw1Ljh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSIyLjEiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCwwQzksMCw5LjksMC45LDkuOSwyLjFjMCwxLjItMC45LDIuMS0yLjEsMi4xUzUuNywzLjMsNS43LDIuMUM1LjcsMC45LDYuNywwLDcuOCwweiIvPgo8L2c+Cjwvc3ZnPgo="); }.icon--fixed { background-image: url("data:image/svg+xml;base64,+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgo8L3N2Zz4K"); }

 <div class="icon icon--broken"></div> <div class="icon icon--fixed"></div>

Answer 2

您必須增加容器的寬度。

你可以在這個操場上看到它： https://codesandbox.io/s/admiring-monad-lwqlk?file=/index.html

Answer 3

問題不是 CSS 而是 base64 字符串中的 SVG 圖像。 打開后發現如下代碼：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" transform="rotate(90 8 8)" fill="#9c9c9c">
<g>
    <circle cx="7.8" cy="13.9" r="1.7"/>
    <path d="M7.8,11.8c1.2,0,2.1,0.9,2.1,2.1C9.9,15.1,9,16,7.8,16s-2.1-0.9-2.1-2.1C5.7,12.7,6.7,11.8,7.8,11.8z"/>
</g>
<g>
    <circle cx="7.8" cy="7.9" r="1.7"/>
    <path d="M7.8,5.8c1.2,0,2.1,0.9,2.1,2.1C9.9,9.1,9,10,7.8,10S5.7,9.1,5.7,7.9C5.7,6.8,6.7,5.8,7.8,5.8z"/>
</g>
<g>
    <circle cx="7.8" cy="2.1" r="1.7"/>
    <path d="M7.8,0C9,0,9.9,0.9,9.9,2.1c0,1.2-0.9,2.1-2.1,2.1S5.7,3.3,5.7,2.1C5.7,0.9,6.7,0,7.8,0z"/>
</g>
</svg>

注意transform="rotation(90 8 8)"屬性。 它將圖像圍繞點 [8,8] 旋轉 90 度。 根據viewBox="0 0 16 16" ，該點應該是圖像的中心，但由於某種原因，尺寸被破壞，並且在圖像的左側分配了 16 個像素的偏移量。

最簡單的解決方法是將 transform 屬性的值更改為rotation(90) 。 base64中的固定圖像為：

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE2IDE2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAxNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHRyYW5zZm9ybT0icm90YXRlKDkwKSIgZmlsbD0iIzljOWM5YyI+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMTMuOSIgcj0iMS43Ii8+Cgk8cGF0aCBkPSJNNy44LDExLjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSwxNS4xLDksMTYsNy44LDE2cy0yLjEtMC45LTIuMS0yLjFDNS43LDEyLjcsNi43LDExLjgsNy44LDExLjh6Ii8+CjwvZz4KPGc+Cgk8Y2lyY2xlIGN4PSI3LjgiIGN5PSI3LjkiIHI9IjEuNyIvPgoJPHBhdGggZD0iTTcuOCw1LjhjMS4yLDAsMi4xLDAuOSwyLjEsMi4xQzkuOSw5LjEsOSwxMCw3LjgsMTBTNS43LDkuMSw1LjcsNy45QzUuNyw2LjgsNi43LDUuOCw3LjgsNS44eiIvPgo8L2c+CjxnPgoJPGNpcmNsZSBjeD0iNy44IiBjeT0iMi4xIiByPSIxLjciLz4KCTxwYXRoIGQ9Ik03LjgsMEM5LDAsOS45LDAuOSw5LjksMi4xYzAsMS4yLTAuOSwyLjEtMi4xLDIuMVM1LjcsMy4zLDUuNywyLjFDNS43LDAuOSw2LjcsMCw3LjgsMHoiLz4KPC9nPgoJCjwvc3ZnPg==