Question

我想让iframe使用像图像一样，所以它占用了整个背景而不是交互式的。它也不得与我当前的代码冲突：

<!DOCTYPE html>
<html>
<head>
<style>
iframe {
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
</style>
</head>
<body>

<iframe src="http://www.google.com" width="300" height="300"></iframe>

</body>
</html>

Answer 1

希望这会有所帮助：

＆＃13;

.container {
  width: 300px;
  height: 300px;
  position: relative; 
  border-radius: 45%;
  overflow: hidden;
}

.container iframe {
  z-index: 1;
  pointer-events: none;
}

.container .blur {
  border-radius: 45%;
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
}

＆＃13;

<div class="container">
  <div class="blur"></div>
  <iframe src="http://gevorg.me/" width="300" height="300" frameborder="0"></iframe>
</div>

＆＃13;

使iframe像图像一样

1 个答案: