css - 添加(组合)CSS 类属性 - 图标或图像

Question

我正在尝试根据为每个不同元素指示的类显示适当数量(和颜色)的点。将有几种不同的所需颜色(可能是 7 或 8 种)，有些会混合使用。不幸的是，由于可能的组合数量很大，因此链接并不是一个真正的选择。

<a class="reddot bluedot greendot purpledot"> Blah Blah Blah</a>
<a class="purpledot"> Blah Blah Blah</a>
<a class="greendot blackdot"> Blah Blah Blah</a>

我尝试了以下 css:

.reddot{
    background-image: url('/images/reddot.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}
.bluedot{
    background-image: url('/images/bluedot.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}
.reddot.bluedot{
    background-image: url('/images/reddot.png'),url('/images/bluedot.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}
etc.

是的，我知道图像在这里重叠......那并不是真正的世界末日。我想我知道如何更好地定位它们。

上面的 css 代码让我得到了我想要的东西，但是各种元素的组合太多了。

我知道我在这里使用的是背景图像，而且我知道这些类不能累积(因此，链接似乎是唯一的方法)。但是，是否有另一种使用 CSS 的方法，我可以通过向 html 添加类来找到添加点 .. 或其他背景或前景图像或图标 .. 的方法？

我无法添加或任何其他类层次结构。

Answer 1

让我们假设您总是想要点并且颜色总是以相同的顺序...

渐变

您可以使用 CSS background-gradients 和 variables 来做到这一点，但它有点复杂。

这是一个例子(如果你想玩的话，在 Codepen 上)我将默认设置为灰色，但如果你不想在视觉上显示插槽，你可以将其更改为透明。

.dots {
	border: 1px #dadada solid;
	min-height: 2rem;
	width: 10rem;
	margin: 1rem 2rem;
	
	background:
    radial-gradient(1rem 1rem at 1rem 50%, var(--c1, #dadada) 45%, transparent 51%),
    radial-gradient(1rem 1rem at 2.5rem 50%, var(--c2, #dadada) 45%, transparent 51%),
    radial-gradient(1rem 1rem at 4rem 50%, var(--c3, #dadada) 45%, transparent 51%),
	radial-gradient(1rem 1rem at 5.5rem 50%, var(--c4, #dadada) 45%, transparent 51%);
}

.red {
	--c1:#D50000;
}
.gold {
	--c2:#FDD835;
}
.blue {
	--c3:#1976D2;
}
.green {
	--c4:#00E676;
}

<div class="dots"></div>
<div class="dots red blue"></div>
<div class="dots green"></div>
<div class="dots gold blue"></div>
<div class="dots red gold green blue"></div>

编辑:改用背景图片

如果您不喜欢径向渐变的外观，您可以以相同的方式链接和定位 background-image。在这种情况下，您可以为要在后台显示的文件路径使用一个变量。

.stackedBG {
	border: 1px #dadada solid;
	height: 40px;
	width: 160px; /* 40 *4 */
	margin: 1rem 2rem;

	background-color: transparent;
	background-image: var(--b1, none), var(--b2, none), var(--b3, none), var(--b4, none);
	/* all images are 40x40px */
	background-position: 0 0px, 40px 0, 80px 0, 120px 0;
    background-repeat: no-repeat;
}

.bg1 {
	--b1:url(https://i.imgur.com/ivPLv2g.png);
}
.bg2 {
	--b2:url(https://i.imgur.com/v8GNPuX.png);
}
.bg3 {
	--b3:url(https://i.imgur.com/ywuzlHn.png);
}
.bg4 {
	--b4:url(https://i.imgur.com/peTsfUi.png);
}

<div class="stackedBG bg3"></div>
<div class="stackedBG bg1"></div>
<div class="stackedBG bg2 bg4"></div>
<div class="stackedBG bg1 bg2 bg3 bg4"></div>

编辑 2:定位背景

我认为定位这些选项(如果不需要相对于左上角)的最简单方法是使用伪元素。在 :after 或 :before 中包含背景，然后绝对定位伪元素。

.dots {
  border: 1px #dadada solid;
  min-height: 5rem;
  margin: 1rem 2rem;
  padding: 0.5rem;
  font-family: Sans-Serif;
  
  /* the important part */
  position: relative;
}

.dots:after {
  content:'';
  position: absolute;
  
  /* size is based on the background layout */
  width:6.5rem;
  height: 1rem;
  
  /* typically I would do positioning here
     But it's easier to show an example if its separate */
  
  background:
    radial-gradient(1rem 1rem at 1rem 50%, var(--c1, #dadada) 45%, transparent 51%),
    radial-gradient(1rem 1rem at 2.5rem 50%, var(--c2, #dadada) 45%, transparent 51%),
    radial-gradient(1rem 1rem at 4rem 50%, var(--c3, #dadada) 45%, transparent 51%),
	radial-gradient(1rem 1rem at 5.5rem 50%, var(--c4, #dadada) 45%, transparent 51%);
  background-repeat: no-repeat;
}

/* positioning */

.tr:after {
  top: 0.5rem;
  right: 0.5rem;
}

.br:after {
  bottom: 0.5rem;
  right: 0.5rem;
}

.tl:after {
  top: 0.5rem;
  left: 0.5rem;
}

.bl:after {
  bottom: 0.5rem;
  left: 0.5rem;
}


/* variables still work the same with the pseudo class */
.red {
	--c1:#D50000;
}
.gold {
	--c2:#FDD835;
}
.blue {
	--c3:#1976D2;
}
.green {
	--c4:#00E676;
}

<div class="dots">Parent Element</div>
<div class="dots red blue tr">Parent Element</div>
<div class="dots green tl">Parent Element</div>
<div class="dots gold blue br">Parent Element</div>
<div class="dots red gold green blue bl">Parent Element</div>