我使用 CSS::before在鏈接之前插入影像。
我在顯示 Github SVG 時遇到問題。SVG 顏色顯示不正確。
注意：作為普通影像，SVG 顯示正常，但background事實并非如此。我試過沒有背景色，各種背景色，還有透明的。
SVG：https : //upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg
a[href^="https://github.com/"]::before {
content: '';
background: #000 url('../image/github.svg') no-repeat center;
background-size: contain;
display: inline-block;
height: 1.1em;
width: 1.1em;
margin-right: 0.3em;
vertical-align: text-bottom;
}
有任何想法嗎？
更新：問題的原因
TBH，上面的代碼如@AHaworth 所指出的那樣作業
實際的 CSS 略有不同，并且存在問題。
實際CSS：
a[href^="https://github.com/"]::before,
/* .... */
a[href^="https://www.mozilla.org/"]::before {
content: '';
background: url('../image/dino.svg') no-repeat center;
background-size: contain;
display: inline-block;
height: 1.1em;
width: 1.1em;
margin-right: 0.3em;
vertical-align: text-bottom;
}
a[href^="https://github.com/"]::before {
background: url('../image/github.svg') no-repeat center;
}
上面沒有正確顯示影像。
但是，將其更改為以下可以正常作業。看來background-size: contain;需要補充了。
a[href^="https://github.com/"]::before {
background: url('../image/github.svg') no-repeat center;
background-size: contain;
}
uj5u.com熱心網友回復：
它顯示影像。問題是你使用黑色背景。洗掉#000
a[href^="https://github.com/"]::before {
content: '';
background: url('https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg') no-repeat center;
background-size: contain;
display: inline-block;
height: 1.1em;
width: 1.1em;
margin-right: 0.3em;
vertical-align: text-bottom;
}<a href="https://github.com/">github</a>uj5u.com熱心網友回復：
評論似乎表明存在一些誤解，所以 FWIW 我把我所做的放在這里。
a[href^="https://github.com/"]::before {
content: '';
background: pink url('https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg') no-repeat center;
background-size: contain;
display: inline-block;
height: 1.1em;
width: 1.1em;
margin-right: 0.3em;
vertical-align: text-bottom;
}<a href="https://github.com/">Github</a>請注意，在此版本中，我將背景顏色設定為粉紅色，只是為了表明除了白色之外的其他效果也是可能的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/352532.html
上一篇：react-spring錯誤：<path>屬性d：預期數量
下一篇：具有動態筆劃的SVG儀表