iframe imはイメージのように動作し、バックグラウンド全体を占有し、インタラクティブではありません。また、私の現在のコードと競合しないようにする必要があります。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>
・ホープ、このことができます：
あなたはIFRAMEを無効にし、それはのように、ぼやけ正しい表示したい.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);
}<div class="container">
<div class="blur"></div>
<iframe src="http://gevorg.me/" width="300" height="300" frameborder="0"></iframe>
</div>驚くばかり！ボーダー半径でも使えますか？ –
？ – gevorg