Question

我试图为我的输入设置两个背景，一个是之前，然后是用户将输入的文本值，然后是统一（它是第二个背景）。

我尝试过两个不同的课程，但只使用了第一个课程。

然后我看到我们可以设置两个用逗号分隔的背景，但我不知道如何为第二个设置不同的位置。

我的CSS看起来像：

.icontaille {
    background: url('../images/taille-16.png'),url('../images/taille-cm16.png') no-repeat scroll 02px 01px !important;
    padding-left: 30px;
    width: 170px !important
}

我也试过了：

 background: url('../images/taille-16.png') no-repeat scroll 02px 01px !important,url('../images/taille-cm16.png') no-repeat scroll 52px 01px !important;

但它根本不起作用。

Answer 1

你是否想尝试这样的事情：

Demo

.icontaille{
    background-image: url('../images/taille-16.png'), url('../images/taille-cm16.png') 
    background-repeat: repeat-y;
    background-position: top left, top right;
    padding-left:30px;    
    width:170px !important
}

Answer 2

您可以设置图像的位置，如下所示。

#example1 {
width: 500px;
height: 250px;
background-image: url('image1.png'), url('image2.png');
background-position: center bottom, left top;
background-repeat: no-repeat;
}

Answer 3

您可以在文本框内的文本前后应用多个背景，方法是在两侧应用padding并相应地在背景中定位背景，如下所示：

input{
  padding:25px 50px;
  background: url(''../images/taille-16.png'') no-repeat, url('../images/taille-cm16.png') no-repeat;
  background-position: left, right;
  background-size:30px, 30px;
}

Demo

详细了解Using multiple CSS backgrounds @ MDN

使用css设置两个背景的属性

3 个答案:

Demo