CSS背景图像在HTML图像横幅上?

时间:2013-05-05 22:25:06

标签: html css

我目前正在调整在线会议网站的样式表,以便它看起来更好。我将使用Chrome的“Inspect Element”功能与“Stylish”插件相结合来创建&保存新的样式表,然后让Chrome用我编辑的版本(客户端)(即插件的功能)替换预先存在的样式表。我遇到困难的一个方面是替换图片横幅,因为它是页面HTML中的图像而不是样式表(见截图):

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

我可以在“bannerimgcell”类中设置背景图像,但http://mt215.sabameeting.com/SiteRoots/main/AgendaStorageRoot/Cobranding/000000ec87840000010d66d1e20a8001/En/US/Images/Banner.gif图像仍在其上。有没有办法为图像的顶层定位背景图像,以便它看起来像是一个新的图像横幅?

编辑:对不起,如果我不清楚的话。我正试图通过CSS将新的标题图像放在预先存在的标题上。

2 个答案:

答案 0 :(得分: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 */ 
}

答案 1 :(得分:0)

我认为您可能正在寻找的是:

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

这将放置由这些规则设置的任何元素,在它下面的任何元素上方,只要它下面的元素具有较低的z-index(默认情况下它会)。

position:absolute表示您必须手动将新CSS元素放在现有内容上,并确保所有宽度和高度都对齐,这样您就不会看到旧图像下方。