轮播图上显示文字

更新日期: 2022-04-01 阅读次数: 3617 字数: 186 分类: CSS

参考:

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).

tags: 轮播图

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式