Iframes wirken wie Bilder

-1

Ich möchte einen iframe im verwenden, um wie ein Bild zu handeln, so dass es den gesamten Hintergrund einnimmt und nicht interaktiv ist. Es muss auch nicht mit meinem aktuellen Code in Konflikt geraten:Iframes wirken wie Bilder

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

Quelle

2016-06-20 Sixtysixpointsixty-four

Sie wollen iframe deaktivieren und zeigen sie als verschwommen, nicht wahr? – gevorg

this helps:

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

Quelle

2016-06-20 05:05:35 gevorg

Super! Funktioniert das mit Border-Radius? –

Iframes wirken wie Bilder

Antwort

Verwandte Themen