我在自己的代碼片段頁面的右下角有一個小標記，它也應該包含我網站的圖示。我想使用::before它，但我不知道如何調整影像大小以保持在1emby1em偽元素內。
顯示代碼片段
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
display: inline-block;
}<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
<a href="https://www.lampe2020.de/" id="l2020-link">Lampe2020.de</a>
</div>我希望 favicon 完全可見，但縮小1em到1em.
我已經嘗試過 CSS object-fit，但無論我將其設定為什么，它對影像的影響都絕對為零。overflow: hidden或者overflow: clip有點作業，但他們顯然只是切斷了影像的太多部分，并且沒有調整影像的大小以適應。
uj5u.com熱心網友回復：
您可以將內容設定為“”并改用背景影像，并將背景大小設定為 1em。
顯示代碼片段
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content:"";
background-image: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
background-size:1em;
display: inline-block;
}<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
<a href="https://www.lampe2020.de/" id="l2020-link">Lampe2020.de</a>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525682.html
標籤：css图片溢出伪元素