Question

我想在div的边框上放置一个小圆形登录图像，这样半边图像只是为了样式目的而在边界线之外？我想我必须设置z-index但是OR是如何有更好的方法吗？

Answer 1

这正是你需要做的。

给你img一个类名。然后在你的样式表中添加类似这样的东西

#classname  
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}

z-index必须是一个大于你的div的数字，如果你没有改变它，它的索引为0。

希望这有帮助。

Answer 2

.overout {  
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}

Answer 3

您可以使用div轻松完成此操作。请考虑以下代码

<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
 <div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
 </div>
</div>
</body>
</html>

您所要做的就是将第二个div“background-color”属性替换为“background-image”属性，并将该div嵌套在现有div中。确保将div设为徽标的确切大小，并设置background-repeat：no-repeat;

希望有所帮助。测试我发布的示例代码。您可以将所有样式信息放入css类中，如下所示：

.logo
{
   background-image: url(yourlogo.png);
   background-repeat: no-repeat;
   width:  /* width of logo */
   height: /* height of logo */
   top:    /* distance from top */
   left:   /* distance from left */
}

如何在div上叠加图像？

3 个答案: