Как создать прозрачный iframe?

Опубликовано: 31 Января, 2022

Тег <iframe> - это встроенный фрейм. Он используется для встраивания другой HTML-страницы в текущую HTML-страницу.

Syntax:

<iframe src = "URL"></iframe>

A transparent iframe can be made by setting its background to transparent.

body {
    background-color : transparent;
}

And, the allowtransparency attribute of “iframe” is to be set as “true”.

<iframe src = "URL" allowtransparency = "true"></iframe>

Example:

  • HTML code:
    <!DOCTYPE html>
    <html>
      
    <body>
        <div style="background: green; 
                padding: 30px;">
                  
            <iframe src="iframe.html" 
                allowtransparency="true">
                Alternate content
            </iframe>
        </div>
    </body>
      
    </html>
  • iframe.html
    <!DOCTYPE html>
    <html>
      
    <body style=
        "background-color: transparent; 
        text-align: center; 
        color: #ffffff;">
          
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
        <p>geeksforgeeks</p>
    </body>
      
    </html>

    Output:




Previous
How to check whether a script is running under Node.js or not ?
Next
HTTP status codes | Redirection Responses
Recommended Articles
Page :
Create a transparent border with CSS30, Jan 20
How to Create a Transparent button using HTML and CSS ?28, Apr 20
Create transparent png image with Python - Pillow23, Feb 21
How to give text or an image transparent background using CSS?02, Jan 19
Nodejs | GM transparent() Function13, Mar 20
How to make bootstrap button transparent ?21, Apr 20
Design a transparent login/Sign Up webpage using HTML and CSS09, Dec 20
How to make background image transparent using Python?22, Jan 21
How to merge a transparent PNG image with another image using PIL?03, Mar 21
Remove border from IFrame using CSS19, Nov 18
HTML | <iframe> width Attribute27, Jun 19
HTML | DOM IFrame Object07, Feb 19
How to check a webpage is loaded inside an iframe or into the browser window using JavaScript?24, Apr 19
HTML | <iframe> sandbox Attribute30, Sep 19
Resize an iframe based on the content10, Jun 19
What’s the best way to reload / refresh an iframe?17, Jun 19
HTML | <iframe> height Attribute27, Jun 19
HTML | <iframe> src Attribute27, Jun 19
Call a parent window function from an iframe19, Jul 19
HTML | <iframe> name Attribute16, Jul 19
HTML | DOM IFrame src Property24, Jul 19
HTML | DOM IFrame width Property24, Jul 19
HTML | DOM IFrame height Property24, Jul 19
HTML | DOM IFrame name Property25, Jul 19
Article Contributed By :
jnikita356
@jnikita356
Vote for difficulty
Article Tags :
  • HTML-Misc
  • Picked
  • HTML
  • Web Technologies
Practice Tags :
  • HTML
Report Issue
Picked HTML HTML-Misc

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023
Когда я должен использовать список против LinkedList
27 Февраля, 2023
Реализовать быструю сортировку с первым элементом в качестве опорного
27 Февраля, 2023
Алгоритм хеш-сортировки
27 Февраля, 2023