CSS ::後背景不顯示

我試圖在div元素後打勾圖像顯示。我嘗試了CSS屬性的幾種組合，但我似乎無法弄清楚如何正確地做到這一點。CSS ::後背景不顯示

類似問題的答案並沒有幫助我。

HTML：

<div class="link-input-container"> 
    <input class="link-input" placeholder="Zalijepi link ovdje..." type="text" class="url_input" name="url_input"> 
</div>

CSS：

.link-input { 
    font-family: Courier New; 
    font-size: 12px; 
} 

.link-input-container::after { 
    display: block; 
    content: ""; 
    width: 12px; 
    height: 12px; 
    background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat; 
}

小提琴：http://jsfiddle.net/mk3fauk5/

來源

2016-06-19 Božo Stojković

它顯示的背景下，問題是背景的大小是如此bi摹那你只看到它的空白，給你的背景的大小和位置，它會工作：DEMO

.link-input-container::after { 
    display: block; 
    content: ""; 
    width: 64px; 
    height: 64px; 
    background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat; 
    background-size:contain; 
    background-position:center; 
}

來源

2016-06-19 10:42:45

哦..從來沒有想過這個問題。謝謝！ –

我該如何將它定位在div的右側？ –

這裏你去：http://jsfiddle.net/mk3fauk5/2/ –

背景圖像比實際div要添加更大::after元素。

嘗試在你的CSS添加此：

.link-input-container::after { 
    display: block; 
    content: ""; 
    width: 64px; 
    height: 64px; 
    background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat; 
    background-size: 100%; 
}

你可以在這裏看到：

https://jsfiddle.net/jn7cq5c9/

來源

2016-06-19 10:43:05 midda25

CSS ::後背景不顯示

回答

相關問題