时间戳

首页 > 解决方案 > How to set multiple combinations of backgrounds for option element using css

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

问题描述

I have a select with multiple options that I want to set many combinations of background images as flags for the elements in the select list, something like this

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

The 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>

enter image description here

I have many flags that I want to set for the options , every flag is a 20px*20px png image

At the first 20px from right I want to set the online flag it can be

At the second 20px from right I want to set the warehouse flag it can be

At the third 20px from right I want to set another flag with 4 possibilities

At the fourth 20px from right I want to set another flag with 3 possibilities

The problem with current approach I used from this question is that I will write a rule for every possible combination of flags which will be (4 + 3 + 4 + 3 + (4*3*4*3)) for example

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

I may also add a 5th flag in the future with 6 possibilities :(

Is there any CSS way to add only one rule for each flag, not for each combination ?

标签： cssbackgroundbackground-image

解决方案

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>

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

推荐阅读