如何使用偏移而不是线性渐变来定位背景图像答案

【问题标题】：How to position an background-image using an offset but not the linear gradient如何使用偏移而不是线性渐变来定位背景图像
【发布时间】：2013-07-08 14:07:59
【问题描述】：

我正在尝试设置 <select>-Field 的样式。
（这是一个仅限 IE10 的页面，所以互操作性只是我的第二个关注点......）

使用：

select
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(images/select-open.png), linear-gradient(#e3dfdb 50%, #d3cec8);
  background-position: right center;
  background-repeat: no-repeat;
  border: solid 1px #adadad;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 20px;
  padding-top: 3px;
}

select::-ms-expand
{
  display: none;
}

我得到类似的东西：

现在，如果我将背景位置修改为background-position: right 10px center;，那么我会得到类似的内容。

如何将图像从右边框定位 10 像素，同时保持线性渐变“一直”？顺便说一句：我觉得在我的图像右侧添加 10 像素的透明度不是一种选择；-)

【问题讨论】：

标签： css

【解决方案1】：

您需要做的是使用逗号分隔两个背景的位置..

background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;

所以在你的情况下，图像是第一，渐变是第二，所以它应该是..

select {
  background-position: right center, 0 0; 
  /* Use pixels instead of right and center for better control... 
     where 1st parameter is x and the other parameter is y
   */

  /* Rest stays the same */
}

【讨论】：