参考:
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 聊聊, 查看更多联系方式