使內聯框架像圖像一樣行事

-1

我想要一個內聯框架使用像圖像一樣行事，因此佔用了整個背景並且不是交互式的。它也不能與我當前的代碼衝突：使內聯框架像圖像一樣行事

<!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>

來源

2016-06-20 Sixtysixpointsixty-four

您希望禁用的iframe並顯示爲模糊的，對不對？ – gevorg

希望這有助於：

.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>

來源

2016-06-20 05:05:35 gevorg

太棒了！這是否適用於邊界半徑？ –

使內聯框架像圖像一樣行事

回答

相關問題