Question

我正在使用优秀的Jalbum为网站制作相册。生成的相册的每个页面都是一个完整的网页，因此在网站中嵌入相册的推荐方法是使用iframe。

当我想要为嵌入式iframe中包含的图像设置样式时出现问题。如果我添加如下规则：

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

到我的样式表，它不会选择iframe中的图像。有没有办法选择嵌入式iframe中包含的元素？

当然，在嵌入iframe之前，我可以手动编辑Jalbum创建的CSS文件，但每次重新生成相册时我都需要记住这样做。

Answer 1

您可以使用JavaScript代码将CSS包含插入iframe的文档中。

Answer 2

根据我的经验，它只是制作比iframe本身的规则更具体的CSS规则。这可以通过例如为iframe提供ID来实现，并且具有外部元素，使其更具体（在我们的平台上使用的直播嵌入示例）：

#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%;
                 }
             }
        }
    }
}

我无法提供有关如何针对您的案例执行此操作的任何具体信息，但使用浏览器开发工具中的DOM检查器来检查DOM并查找要覆盖的类。

设计iframe样式

2 个答案: