如何使用偏移量而不是线性渐变来定位背景图像 [英] How to position an background-image using an offset but not the linear gradient

问题描述

我试图创建一个< select> - 字段。

（这是一个仅IE10的页面，我的第二个问题...）

I'm trying to style a <select>-Field.
(This is an IE10-only page, so interoperability is only my second concern...)

使用：

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;
}

我得到类似的东西：

I get something like:

现在，如果我将背景位置修改为 background-position：right 10px center; 然后我得到像。

Now, if I modify the backgroud position to background-position: right 10px center; then I get something like .

如何将图像从右边框定位10px，同时保持线性渐变一路？
BTW：我觉得在图像的右边添加10px的透明度不是一个选项; - ）

How can I position the image 10px from the right border while keeping the linear gradient "all the way"? BTW: I feel that adding 10px of transparency to the right side of my image is not an option ;-)

推荐答案

p>

What you need to do is separate the position for both the backgrounds using a comma..

background-position: FIRST_IMAGE_POSITION, SECOND_IMAGE_POSITION;

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

So in your case, image is first and gradient is second so it should be..

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 */
}

这篇关于如何使用偏移量而不是线性渐变来定位背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！