.net 减少对预设div背景进行淡入淡出的功能 背景/目标

我有几张唱片。在每个div中，我想放置两个不同的类（每个类在我的应用程序中具有不同的逻辑含义）

我希望一个类代表一个级别，它将转换为div的颜色。我希望另一个类代表距离，并控制应用的任何背景的淡入度级别

所以我希望div看起来像：

<div class="element level-beginner distance-long">

我想把它转换成，比如说，褪色的绿色背景

我对LESS知道一点（但只知道一点），嵌套样式是否有帮助（因为它不处理子元素，而是处理是否已经应用了某个类）

本质上，我想控制颜色和不透明度/淡入度，作为相互独立的CSS类

问题

• 有没有一种方法可以使用较少的颜色，这样类就可以控制div元素背景的alpha/淡入度，而不必指定颜色

---

颜色不透明度较小的函数（fadein、fadeout、fade）要求将颜色作为其第一个参数。LESS不知道如何组合类，因此不知道从何处获取颜色
CSS中有一个

opacity

属性，但它会调整整个元素（包括文本）的透明度
您唯一的实际选择是为您计划使用的每个组合写出选择器，或者为您生成一个mixin：

.themeMatrix(@color) {
    &.styleA {
        background: fade(@color, 50%);
    }

    &.styleB {
        background: fade(@color, 20%);
    }

    &.styleC {
        border: 1px solid @color;
    }
}

.colorA {
    .themeMatrix(white);
}

.colorB {
    .themeMatrix(green);
}

---

颜色不透明度较低的函数（fadein、fadeout、fade）要求将颜色作为其第一个参数。LESS不知道如何组合类，因此不知道从何处获取颜色
CSS中有一个

opacity

属性，但它会调整整个元素（包括文本）的透明度
您唯一的实际选择是为您计划使用的每个组合写出选择器，或者为您生成一个mixin：

.themeMatrix(@color) {
    &.styleA {
        background: fade(@color, 50%);
    }

    &.styleB {
        background: fade(@color, 20%);
    }

    &.styleC {
        border: 1px solid @color;
    }
}

.colorA {
    .themeMatrix(white);
}

.colorB {
    .themeMatrix(green);
}

---

由于只有HTML、CSS和更少的内容，一个应用于元素的类无法“知道”另一个类的背景色以使其淡出。这是不可能的
但是，您仍然可以获得类似的效果，允许您链接类以创建新效果
写这篇文章的基本、简单的CSS方法如下：

.fire {
  background: rgb(255,0,0)
}
.fire.level-beginner {
  background: rgba(255,0,0,.5)
}
.fire.level-pro {
  background: rgba(255,0,0,.25)
}

有了这个CSS，如果一个元素有类

.fire

和

.level初学者

，它就会得到淡出的背景
现在，这就是为什么预处理器很酷：我们可以让mixin负责创建嵌套类，因此为所有嵌套子选项添加新颜色（例如

。water

和

blue

）是一件简单的事情：
更少：

.colorfade(@fade) {
  background: fadeout(@color, @fade);
}

.colorfind (@color) {
  background: @color;
  &.level-beginner {
    .colorfade(50%)
  }
  &.level-pro {
    .colorfade(25%)
  }
}

.fire {
  .colorfind(red);
}

.water {
  .colorfind(blue);
}

.earth {
  .colorfind(green);
}

<div class="fire level-beginner"></div>
<div class="water level-pro"></div>
<div class="earth level-beginner"></div>

HTML:

.colorfade(@fade) {
  background: fadeout(@color, @fade);
}

.colorfind (@color) {
  background: @color;
  &.level-beginner {
    .colorfade(50%)
  }
  &.level-pro {
    .colorfade(25%)
  }
}

.fire {
  .colorfind(red);
}

.water {
  .colorfind(blue);
}

.earth {
  .colorfind(green);
}

<div class="fire level-beginner"></div>
<div class="water level-pro"></div>
<div class="earth level-beginner"></div>

---

仅使用HTML、CSS和更少的内容，一个应用于元素的类无法“知道”另一个类的背景色以使其淡出。这是不可能的
但是，您仍然可以获得类似的效果，允许您链接类以创建新效果
写这篇文章的基本、简单的CSS方法如下：

.fire {
  background: rgb(255,0,0)
}
.fire.level-beginner {
  background: rgba(255,0,0,.5)
}
.fire.level-pro {
  background: rgba(255,0,0,.25)
}

有了这个CSS，如果一个元素有类

.fire

和

.level初学者

，它就会得到淡出的背景
现在，这就是为什么预处理器很酷：我们可以让mixin负责创建嵌套类，因此为所有嵌套子选项添加新颜色（例如

。water

和

blue

）是一件简单的事情：
更少：

.colorfade(@fade) {
  background: fadeout(@color, @fade);
}

.colorfind (@color) {
  background: @color;
  &.level-beginner {
    .colorfade(50%)
  }
  &.level-pro {
    .colorfade(25%)
  }
}

.fire {
  .colorfind(red);
}

.water {
  .colorfind(blue);
}

.earth {
  .colorfind(green);
}

<div class="fire level-beginner"></div>
<div class="water level-pro"></div>
<div class="earth level-beginner"></div>

HTML:

.colorfade(@fade) {
  background: fadeout(@color, @fade);
}

.colorfind (@color) {
  background: @color;
  &.level-beginner {
    .colorfade(50%)
  }
  &.level-pro {
    .colorfade(25%)
  }
}

.fire {
  .colorfind(red);
}

.water {
  .colorfind(blue);
}

.earth {
  .colorfind(green);
}

<div class="fire level-beginner"></div>
<div class="water level-pro"></div>
<div class="earth level-beginner"></div>

---

就个人而言，我会添加一个语义类名，然后只使用一个带几个参数的mixin。就个人而言，我会添加一个语义类名，然后只使用一个带几个参数的mixin。感谢您确认我想做的事情本质上是不可能的，也感谢您提供了一个很好的示例。非常感谢！谢谢你，感谢你证实了我想做的事情本来是不可能的，也感谢你提供了一个很好的例子。非常感谢！