0

我目前正在调整一个在线会议网站的样式表，使其看起来更好。我将使用 Chrome 的“检查元素”功能与“时尚”插件相结合来创建和保存新样式表，然后让 Chrome 用我编辑的客户端版本（即插件的功能）替换预先存在的样式表。我遇到困难的一个领域是替换图像横幅，因为它是页面 HTML 中的图像，而不是样式表上的图像（见屏幕截图）：

http://i.imgur.com/JRrYkvd.jpg

我可以在“bannerimgcell”类中设置背景图像，但http://mt215.sabameeting.com/SiteRoots/main/AgendaStorageRoot/Cobranding/000000ec87840000010d66d1e20a8001/En/US/Images/Banner.gif图像仍位于顶部其中。有没有办法将这个类的背景图像放置在图像之上，使它看起来像一个新的图像横幅？

编辑：对不起，如果我不清楚。我正在尝试通过 CSS 将新的标题图像放在先前存在的图像上。

4

2 回答 2

2

JavaScript 解决方案：

您可以更改图像源：

var newImg = "http://mt215.sabameeting.com/SiteRoots/main/AgendaStorageRoot/Cobranding/000000ec87840000010d66d1e20a8001/En/US/Images/Banner.gif"
document.getElementsByClassName('bannerimgcell')[0].setAttribute('src', newImg);

随着渲染层的组合，您的 CSS 背景将位于 img src 下方。不确定此代码是否有效。我假设“bannerimgcell”是 img 标签的类，它是第一个标签。

CSS 解决方案：

.bannerimgcell:after { 
    background-image: url('someNewImg.gif');
   /* width, height and position to match the overlaid element */ 
}
于 2013-05-05T22:30:41.130 回答
0

我认为您可能正在寻找的是使用：

position: absolute;
z-index: 2;
background-image: url('yourimage.jpg');

这将放置由这些规则设置样式的任何元素，在其下方的任何元素之上和之上，只要它下面的元素具有较低的元素z-index（默认情况下它会）。

position:absolute意味着您必须手动将新的 CSS 元素放置在现有内容上，并确保所有宽度和高度对齐，这样您就不会看到下面的旧图像。

于 2013-05-05T22:50:42.913 回答