带图片和渐变的CSS背景，多行怎么写？

Question

我想将以下 CSS 属性定义分解为每个单独的属性。

这是行之有效的单行属性定义:

div{
  background: url('packages/select2/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}

我试过了，但没用:

div{
    background: linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
    background-image: url('packages/select2/select2.png');
    background-repeat: no-repeat 100% -22px;
}

Answer 1

编辑:

实际上，不可能通过定义各个属性来按照您想要的方式对事物进行分层。由于您试图以不同方式定位和重复图层，因此唯一的方法是使用单行 background 定义。否则你只会用后面的定义覆盖以前的属性定义。如果所有层都有一个 background-position 属性，它会起作用，否则就不行。

要么使用单行 background 定义并在各层之间使用逗号，要么将背景分解为多个元素并将它们分层放置在 DOM 中。