Question

假设我想要一个从底部淡出的列表。我可以将其手动编码为：

/* etc... */

ul > li:nth-last-child(4) {
  color: rgba(0, 0, 0, 0.4);
}

ul > li:nth-last-child(3) {
  color: rgba(0, 0, 0, 0.3);
}

ul > li:nth-last-child(2) {
  color: rgba(0, 0, 0, 0.2);
}

ul > li:nth-last-child(1) {
  color: rgba(0, 0, 0, 0.1);
}

我可以改为访问规则中的索引吗？

例如：

ul > li:nth-last-child(n) {
  color: rgba(0, 0, 0, n / 10);
}

Answer 1

您可以使用以下内容：

ul {
  background: linear-gradient(#000, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<ul>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
</ul>

顺便说一下，所有浏览器都不支持此功能，您可以详细了解text-fill-color和background-clip

Answer 2

不是这样，不。但是你可以使用渐变渐变来掩盖整个列表：

＆＃13;

ul {
  font: 11pt/1.4em sans-serif;
  -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
}

＆＃13;

<ul>
  <li>Lorem ipsum dolor</li>
  <li>sit amet, consectetur</li>
  <li>adipiscing elit.</li>
  <li>Praesent mollis, nisl eget tincidunt consequat,</li>
  <li>sem risus semper lectus,</li>
  <li>ut iaculis massa est at tortor.</li>
  <li>Mauris dolor turpis,</li>
  <li>vulputate id arcu elementum
</ul>

＆＃13;

这适用于任何背景。但是IE和Edge不支持它：https://caniuse.com/#feat=css-masks

background-clip属性可能是一个更好的选择，如果您需要支持旧浏览器（它的行为与mask-image略有不同，例如，在图像背景上尝试）。请参阅@ TemaniAfif的回答：https://stackoverflow.com/a/47222950/3776299

Edge还支持SVG蒙版：https://developer.mozilla.org/en-US/docs/Web/CSS/mask

是否可以在CSS规则中使用索引？

2 个答案: