Question

我的网站上有一个Blogger页面的iframe，其外观类似于this。为了避免在iframe窗口的底部截断文本（看上去很尴尬），我想在iframe窗口的底部使用渐变透明蒙版以使其平滑。

我已经尝试过对iframe本身进行透明效果，但是它应用于iframe页面的底部，因此我认为应该使用覆盖div。

我知道如何制作div并将其定位，但是我不知道如何应用该效果。

谢谢。

Answer 1

这样对您有用吗？

html,
body {
  margin: 0px;
  overflow: hidden
}

iframe {
  height: 100vh;
  width: 100vw;
}

.iframe-cover {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 20%;
  width: 100%;
  background-image: linear-gradient(transparent, transparent, black, black);
}

<iframe src="https://www.bing.com" frameborder="0"></iframe>
<!--Bing is just a place holder-->
<div class="iframe-cover"></div>

如何在iframe上制作透明蒙版div？

1 个答案: