Question

我试图在div元素后显示刻度图像。我尝试了几种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/

Answer 1

它显示了背景，问题是背景的大小太大，以至于你只看到它的空白区域，给你的背景大小和位置，它会工作： 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;
}

Answer 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/

CSS ::后台不显示后

2 个答案: