css图片背景位置动态

Question

我在一个 webapp ( html / css ) 中工作，我问自己 css 是否有可能得到我在标题中提出的问题。

我有这个 html：

<input type="text" class="custom-bg">

而这个CSS：

.custom-bg { 
  background: url(icons.png) right -4579px no-repeat; 
  background-size: 39px 39px; //Size of the icon
}

我的输入并不总是相同的大小，如果您调整浏览器的大小，它可能会改变。
我想把那个图标（它是一个向下箭头）放在右上角，这就是为什么我在background属性中拥有right 。

我想要类似 position: right 5%而不是固定位置或值（数字）的东西。

有可能吗？ （我的意思是 css-way，没有 js）这是一个很大的 web 应用程序，有些类我无法触及。

谢谢

Answer 1

鲍曼，

这绝对是可能的，我一直将它用于输入字段，尤其是搜索输入。 你需要做的是：

.custom-bg { 
  background: url(icons.png) no-repeat 95% 0px; 
  /*background-size: 39px 39px; //Size of the icon*/
}

只要您的文件中的图标大小正确，您就不需要背景大小，95% 表示图标将放置在输入字段的最右侧，而 0px 是从上到下的间距. 您可以相应地调整该百分比。