Styling an iframe | 易学教程

问题

I'm using the excellent Jalbum to create a photo album for a website. Each page of the generated photo album is a complete webpage, so the recommended way to embed the album within a website is to use an iframe.

A problem arises when I want to style the images contained within the embedded iframe. If I add a rule such as:

img { 
    -ms-interpolation-mode: bicubic; 
}

to my stylesheet, it does not select the images within the iframe. Is there a way to select elements contained within an embedded iframe?

Of course, I could manually edit the CSS file created by Jalbum before I embed the iframe, but I would need to remember to do this every time I regenerate the album.

回答1:

You could use JavaScript code to insert a CSS include into the document of the iframe.

回答2:

From my experience it is just about making CSS rules that are more specific than the rules within the iframe itself. this can be accomplished by for instance giving an ID to the iframe, and have that has the outer element, making it more specific (LESS example with a livestream embed that we are using on our platform):

#livestream-iframe-wrapper {
width: 100%;
height: 100%;
    #livestream-viewer {
        width: 100%;
        height: 100%;
        #layout0, #layout1, #layout2, #layout3 {
            #layout4, #layout0-lsplayer, #layout1-lsplayer, #layout2-lsplayer, #layout3-lsplayer, #layout4-lsplayer {
                width: 100%;
                height: 100%;
                #lsplayer {
                    width: 100% ;
                    height: 100%;
                 }
             }
        }
    }
}

I cant give any specific information on how to do this for your case, but use the DOM inspector in the browser development tools to inspect the DOM and find the classes to override.

来源：https://stackoverflow.com/questions/523836/styling-an-iframe

标签

html

css

iframe