将图库放在背景图像上
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将图库放在背景图像上相关的知识，希望对你有一定的参考价值。
在我的主页上，我有一个背景图像，我想覆盖该背景图像，并在中心放置一个图像库（4个图像）。我附上了一个screen shot给人们一个想法。
谢谢
答案
像这样：
document.getElementById('g1').onclick = function() {
document.getElementById('bigImage').innerhtml = '<img src="http://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" style="height: 600px; width: 600px;">';
document.getElementById('g1').innerHTML = '<img src="http://www.spitzer.caltech.edu/uploaded_files/images/0009/6502/ssc2013-07b_Ti.jpg" style="height: 60px; width: 60px;">';
};#bigImage{
width: 600px;
height: 600px;
}
#gallery {
width: 60px;
height: 60px;
z-index: 99999;
}<div>
<div id = "bigImage">
<img src="http://www.spitzer.caltech.edu/uploaded_files/images/0009/6502/ssc2013-07b_Ti.jpg" style="height: 600px; width: 600px;">
</div>
<div id = "gallery">
<div id = "g1">
<img src="http://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" style="height: 60px; width: 60px;">
</div>
</div>
</div>另一答案
或者像这样，通过使用position属性......
#bigImage{
width: 600px;
height: 600px;
background-image: url("http://www.spitzer.caltech.edu/uploaded_files/images/0009/6502/ssc2013-07b_Ti.jpg");
}
#gallery {
width: 60px;
height: 60px;
z-index: 99999;
position: absolute;
bottom: 30px;
right: 30px;
}<div id = "bigImage">
<div id = "gallery">
<img src="http://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" style="height: 60px; width: 60px;">
</div>
</div>以上是关于将图库放在背景图像上的主要内容，如果未能解决你的问题，请参考以下文章