如何使用 css 为选项元素设置多种背景组合

Question

我有一个 select 有多个选项，我想为 select 列表中的元素设置许多背景图像组合作为 flags，就像是这个

CSS

option{width:300px;}
option.online{background: url(media/flags/online.png) no-repeat right 0px center;}
option.full{background: url(media/flags/full.png) no-repeat right 20px center;}
option.online.full{background: url(media/flags/online.png) no-repeat right 00px center, url(media/flags/full.png) no-repeat right 20px center;}

HTML

<select multiple>
    <option class="online full">p1-soldiers(R)</option>
    <option>p2-Blackberry(R)</option>
    <option>p3-RICK(R)</option>
    <option>p4-Aj Lifestyle(R)</option>
    <option>p5-abosaleh(R)</option>
<select>

我有很多我想为选项设置的标志，每个标志都是一个 20px*20px 的 png 图片

右起第一个20px我想设置在线标志可以

在线
离线
在线时间过长
离线太久

右边第二个20px我想设置仓库标志可以

满
空
正常

在右起第三个 20px 处我想设置另一个有 4 种可能性的标志

在右起第四个 20px 处我想设置另一个有 3 种可能性的标志

我从 this question 使用的当前方法的问题是，我将为 每个可能的标志组合 编写一个规则，这将是 (4 + 3 + 4 + 3 + (4*3*4*3))例子

option.online{}
option.offline{}
option.onlineTooLong{}
option.offlineTooLong{}
option.full{}
option.online.full{}
option.offline.full{}
/* ...... etc */

我将来可能还会添加第 5 个标志，有 6 种可能性:(

有什么CSS方法可以只为每个标志添加一个规则，而不是为每个组合添加？

Answer 1

CSS 变量可以帮助你。

这是一个基本示例，我将使用渐变，您可以将其替换为您的标志

.flags {
   background: 
      var(--f1,linear-gradient(transparent 0 0)) right 0px top 0px,
      var(--f2,linear-gradient(transparent 0 0)) right 20px top 0px,
      var(--f3,linear-gradient(transparent 0 0)) right 40px top 0px;
      /*var(--f4,linear-gradient(transparent 0 0)) right 60px top 0px */
   background-size:20px 20px;
   background-repeat:no-repeat;
}
/* for the first flag*/
.f1-1{--f1:radial-gradient(circle 10px,red 98%,transparent);}
.f1-2{--f1:radial-gradient(circle 10px,blue 98%,transparent);}
.f1-3{--f1:radial-gradient(circle 10px,green 98%,transparent);}
.f1-4{--f1:radial-gradient(circle 10px,yellow 98%,transparent);}
/* for the second flag*/
.f2-1{--f2:linear-gradient(red 0 0);}
.f2-2{--f2:linear-gradient(blue 0 0);}
.f2-3{--f2:linear-gradient(green 0 0);}
/* for the third flag*/
.f3-1{--f3:linear-gradient(pink 0 0);}
.f3-2{--f3:linear-gradient(purple 0 0);}
.f3-3{--f3:linear-gradient(black 0 0);}



[class] {
  width:100px;
  height:100px;
  display:inline-block;
  border:1px solid;
}

<div class="flags"></div>
<div class="flags f1-1"></div>
<div class="flags f2-1 f3-2"></div>
<div class="flags f1-3 f2-2"></div>
<div class="flags f2-1 f3-3 f1-1"></div>
<div class="flags f2-3 f1-4"></div>
<div class="flags f2-1"></div>
<div class="flags f3-3"></div>

每个标志都有一个变量，您需要做的就是通过更改该变量为每种情况定义一个 class，然后您只需应用您需要的 classes 即可获得组合你要。

如何使用 css 为选项元素设置多种背景组合

How to set multiple combinations of backgrounds for option element using css

css

background

background-image