将不透明度应用于隐藏的溢出

Question

有没有办法将不透明度应用于 CSS 中的隐藏溢出？我有一个 div 必须使用 overflow: hidden 属性但我想对隐藏元素应用不透明度。

这是我要实现的目标的基本示例：

.slick-list:after {
  content: '';
  display: block;
  background: red;
  opacity: 0.5;
}

slick 插件使用一个名为 .slick-list 的 class，class 负责从主容器中隐藏滑块。作为设计要求的一部分，我需要使用不透明度属性来显示隐藏的幻灯片。那可能吗？我认为如果我将不透明度属性应用于 ::after 元素它会起作用但显然没有任何效果。

Answer 1

没有。您不能在隐藏元素上使用 opacity，它们不可见，因此必须将 overflow 设置为 visible 才能实现您的愿望。

Answer 2

隐藏的对象不能有不透明度，因为它不可见，您应该将 overflow 设置为 visible 或任何合适的选项并应用不透明度

Answer 3

我已经找到解决方法。基本上向正文添加全宽 div 并在 div 内添加旋转木马效果非常好。

.container {
  padding: 0;
  overflow: hidden;
}

.slick-list {
  overflow: visible;
}

Apply opacity to hidden overflow