使用CSS的image on image布局
使用CSS的image on image布局
提问于 2011-03-13 03:31:43
我有一个图像，我想在上面放置其他图像。例如，篮球场上的球员
用CSS做这件事的最好方法是什么?我很想用表做这件事，但我担心有更好的解决方案
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-03-13 03:34:03
如果你使用表格，我会把你去势:)
接下来是div和CSS：
HTML：
<div id="bb-court">
<div id="player-1">
</div>
</div>CSS：
#bb-court {
z-index:1;
}
#player-1 {
z-index:2;
background-image: url();
position: absolute;
margin: top right bottom left; /* All with reference to parent */
}Stack Overflow用户
发布于 2011-03-13 03:43:07
对于这一点，只有比表格更好的解决方案:)。
你要找的东西叫做绝对定位。这意味着您可以抓取一个元素，将其从文档流中取出并定义其坐标(左、上)。默认情况下，0,0坐标从浏览器区域的左上角开始。
让我给你举一个简单的例子。这里我们将所有东西都定义为div：
<div id="court">
<div class="player" id="john_smith">
<div class="player" id="gunter_kreitzsch">
</div>以及随之而来的CSS：
#court {
position: relative; /* makes the top left corner of court 0,0 */
width: 500px; height: 500px; /* define size */
background-image: url(court.jpg);
}
.player { /* definition for player divs */
position: absolute;
width: 20px; height: 100px;
}
#john_smith { /* individual player definition */
top: 30px; left: 50px; /* defining where the player should be */
background-image : url(john_smith.png);
}Stack Overflow用户
发布于 2011-03-13 03:40:54
您可以创建多个div并使用css设置样式，如下所示(可能并不准确，因为我正在发疯)
<div class="court">
<div class="player"></div>
<div class="ball"></div>
</div>
#css
.court {
float: left;
position: relative;
background: url(../images/court.png) no-repeat;
width: 400px;
height: 200px;
}
.court .player {
position: absolute;
left: 5px;
top: 10px;
}
.court .ball {
position: absolute;
left: 5px
top: 10px;
}请记住，这是一个快速模拟，我建议沿着这条路线走下去，使用Firebug for firefox进行调试，并获得您想要的位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5284907
复制相关文章
相似问题
腾讯云开发者
