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 ::后背景不显示

回答

相关问题