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;
}

在slide-text-half类上设置50％的宽度会让背景陷入狂热，我无法弄清楚原因。有什么建议吗？

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

使用光滑的半宽覆盖在幻灯片上

2 个答案: