使用光滑的半角覆盖幻灯片

Question

我有一个简单的滑块，其中包含图像和纯文本幻灯片。我正在尝试在幻灯片上设置背景颜色叠加层，但我无法定位和设置叠加层的确切宽度（以百分比表示）。

这是我正在使用的代码笔：http://codepen.io/anon/pen/RrewXV

.slide-text-half {
  background:rgba(130,20,20,0.8);
  color:#fff;
  padding:0px;
  height:100%;
  width:inherit;
  z-index:2;
  position:absolute;
  top:0;
}

在幻灯片文本的一半上设置 50% 的宽度 class 会使背景变得混乱，我不明白为什么。有什么建议吗？

Answer 1

您需要添加

.slick-initialized .slick-slide {
    position: relative;
}

Answer 2

具有 position: absolute 的元素根据其第一个 position 不同于 static 的第一个父元素调整大小。

因此，如果您想按比例调整幻灯片的 div 大小，则必须在幻灯片上添加 position: relative，并确保它们具有滑块的高度：

.slick-track {
  height: 100%;
}
.slick-slide {
  position: relative;
}

这是一支笔：http://codepen.io/tzi/pen/eJPmbZ

使用光滑的半角覆盖幻灯片

Half-width overlay over slide using slick

css

slick.js