FLBOOK高手技巧之透明背景嵌入网页

像这样的效果，以iframe代码方式把书刊嵌套在个人网站后，如何让嵌入的电子书没有任何按钮，直接漂浮在自己网站网页之上，是如何实现的呢？

以下方案是把作品嵌套个人网站后实现透明穿透方法

实现条件

1、编辑器里预览设置下-把书刊大背景颜色设置为透明色，去掉背景图片：

参考教程：https://flbook.com.cn/tutorial/18.html

2、选择书刊去除logo，并在预览设置-外观设置-工具条设置里设置上下工具条完全隐藏完全隐藏，

参考教材：https://flbook.com.cn/tutorial/course/504.html

3、iframe标签设置允许透明，并且背景色设置为透明，代码可参考：

<iframe seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" src="https://flbook.com.cn/c/dxngz8BAjq/" style="width:100%;height:100%"></iframe>

完整示例

<div id="transparentPreview" style="width:100%;height:100%;position: fixed;left: 0;top:0;z-index: 1001;">
    <iframe seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" src="https://flbook.com.cn/c/dxngz8BAjq/" style="width:100%;height:100%"></iframe>
    <a style="border-radius: 50%;background-color:rgba(0,0,0,0.9);border: 2px solid #fff;position: absolute;top:7px;left: 50%;transform: translateX(-50%);font-size: 26px;width: 30px;height: 30px;text-align: center;line-height:26px;color: #fff;" onclick="document.getElementById(\'transparentPreview\').remove();">×</a>
</div>

iframe标签的src值替换成您的电子书地址。

DIY开发

上面完整示例中加入了一个关闭按钮，您可以根据自己的需求，使用JavaScript和CSS写出更好的效果，比如让iframe从小变大进入，更换关闭按钮的样式、位置，增加动画效果等。

示例参考

官网首页点击这里可查看示例效果。