轮播图上显示文字

参考：

https://naver.github.io/egjs-flicking/Showcases

中的 Naver Art Window (Mobile) 那个示例。

overlay 涂层样式

在与 flicking-viewport (轮播图组件) 的平级 div，有个 overlay div。
用来包裹文字，主要是定位。

.banner .overlay {
    position: absolute;
    bottom: 40px;
    left: 10px;
    z-index: 12;
    box-sizing: border-box;
    pointer-events: none;
    width: 300px;
}

.banner {
    position: relative;
}

overlay 中文译为，覆盖物，涂层。

overlay 内部的文字样式

overlay 内部的文字样式，实际上用了一个透明的黑底。

span {
    background-color: rgba(0,0,0,.2);
    color: #fff;
    margin: 1px;
    padding: 4px;
}

透明度设置

rgba(0,0,0,.2), rgba 的最后一个值为 alpha 参数：

• 0 为完全透明
  
• 1 为完全不透明
  

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式